文本没有自动换行，导致超出屏幕范围，在React Native中。

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>
        }/>);

问题是文本没有换行，当文本很长时会溢出屏幕。我该如何解决？

- Amir_P

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>

告诉我这是否适用于您！

- GauthierG

---

我记得在发布问题之前，我尝试过使用maxWidth而不是width，但没有帮助。谢谢，它现在可以工作了。 - Amir_P

Answer 2

您可以将内容包装在一个屏幕大小为width的组件中。

使用Dimensions包计算width。

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

然后将此宽度分配给style对象{width: fullWidth}

希望这能解决问题 :)

- Aseem Upadhyay

---

尝试将您的Flatlist包装在一个具有屏幕宽度的View中。 - Aseem Upadhyay

那也没有帮助到。 - Amir_P