Reactjs 弹性方向行项目溢出如何解决此问题？

我有两行，第一行包含图像，第二行包含文本。因此，当我使用flexDirection:“行”时，文本溢出宽度，省略号不显示。请检查一下我的代码

<View style={styles.boxContainer}>
    <View style={{marginRight: 10}}>
        <Text style={{textAlign: 'left'}}>
            <Image
                style={styles.eventImg}
                source={{uri: item.image}}
            />
        </Text>
    </View>
    <View>
        <Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
        <Text style={{fontSize: 12, color: '#878787'}}>{item.formatted_date}</Text>
        <Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}</Text>
        <View style={{flexDirection: 'row'}}>
            <TouchableOpacity
                onPress={() =>
                    this.onPressReadMore(item.id)
                }
            >
                <Text style={{fontSize: 12, padding: 5, backgroundColor: '#76ac42', color: '#ffffff', borderRadius: 3, textAlign: 'center', marginTop: 10, width: 80}}>Read More</Text>
            </TouchableOpacity>
            <Text style={{alignSelf: 'center', textAlign: 'right'}}>Registered</Text>
        </View>
    </View>
</View>

我哪里出了问题。我试过很多文章，但没有一篇有效。有没有办法解决这个问题。请仔细看看这个设计

请尝试以下代码：

<View style={{flexDirection:'row'}}>
    <Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
        {item.descr}
    </Text>
</View>

{item.descr}

在包含省略号的

视图中设置水平值


....
{item.descr}

这是一个我简化过的示例。
flexWrap:“wrap”
在
boxContainer
中放置它的位置@Vaibhavvishal您想要什么设计？你有参考图片吗？@hongkong将同一图片附在后。在图像
Registered
中，文本应位于右侧。@JithinVarghese请尝试marginLeft:'auto'而不是alignSelf:'center'，textAlign:'right'。或alignSelf:“flex end”。如果我们添加宽度，它将在不同的屏幕大小中打断。将宽度添加到长方体容器的样式中。
<View style={{flexDirection:'row'}}>
    <Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
        {item.descr}
    </Text>
</View>