文字没有包装，屏幕的反应是原生的

Question

我有一个组件，它会显示彼此相邻的两个Text的项目列表。一个用于标题，一个用于内容。这是我的渲染实现：

let items = [
    {title: 'Test Test:', value: 'Long Test Long Test Long Test Long Test Long Test Long Test Long Test'},
    {title: 'Test:', value: 'Short Test Test Test'},
];
return (<FlatList
        style={{flex: 1, width: Dimensions.get('window').width}}
        data={items}
        renderItem={({item}) =>
            <View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
                <Text style={{color: colors.accentColor}}>{item.title}</Text>
                <Text>{item.value}</Text>
            </View>
        }/>);

问题是文字没有被包裹，而且当它是一个长文本时，它会进入屏幕。我该如何解决？

Answer 1

我复制了你的案例，我设法通过在你的长文本上添加flex: 1属性来做正确的包装：

<View style={{flexDirection: 'row', width: Dimensions.get('window').width}}>
    <Text style={{color: "red"}}>{item.title}</Text>
    <Text style={{flex: 1}}>{item.value}</Text>
</View>

告诉我它是否适合你！

Answer 2

您可以将内容包装在屏幕尺寸为width的组件中。

使用width包计算Dimensions。

let fullWidth = Dimensions.get('window').width

然后将此宽度指定给style对象{width: fullWidth}

希望这可以解决：）