[英]Text out of view in Touchable opacity React native
I'm new to react native and i'm trying to display some text in a custom touchable opacity.我是本机反应的新手,我正在尝试以自定义的可触摸不透明度显示一些文本。 but the text keep exceeding the border even when i'm using flex wrap.
但是即使我使用 flex wrap,文本也会一直超出边框。 my code is the following:
我的代码如下:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:这是我使用的 styles 的外观:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it我该如何包装它
Issue was not in the <Text>
element that you have given the style flexWrap:1
.问题不在您指定样式
flexWrap:1
的<Text>
元素中。 Problem was in the parent elements.问题出在父元素中。
Adding flex: 1
to <TouchableOpacity>
and <View>
which contains your <text>
will solve the problem.添加
flex: 1
到<TouchableOpacity>
和<View>
包含您的<text>
将解决问题。
This will do the calculation for width depends on the device width.这将根据设备宽度计算宽度。
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.在我的机器上测试了代码。 Cheers!
干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.