Touchable opacity React native 中的文本看不见

Question

我是本机反应的新手，我正在尝试以自定义的可触摸不透明度显示一些文本。但即使我使用 flex wrap，文本也会不断超出边界。我的代码如下：

 <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>

这是我使用的样式的外观：

main_container: {
        flex: 1,
        height: 300,
        flexDirection: 'column',
        backgroundColor: "grey",
        width: '95%',
        margin: 10,
    },
ctr1: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'white',
        //margin: 2,
    },

我该如何包装它

Answer 1

问题不在您指定样式flexWrap:1 的<Text> 元素中。问题出在父元素中。

将flex: 1 添加到包含您的<text> 的<TouchableOpacity> 和<View> 将解决问题。

这将根据设备宽度计算宽度。

<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>

---

在我的机器上测试了代码。 干杯！