文本没有换行，并且正在获取屏幕反应本机

Posted 2023-02-21

【中文标题】文本没有换行，并且正在获取屏幕反应本机

【英文标题】：Text is not wrapping and is getting of the screen react native

【发布时间】：2018-11-15 19:25:49

【问题描述】：

我有一个组件，它将显示一个项目列表，其中两个 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>
        />);

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

【参考方案1】：

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

使用Dimensions 包计算width。

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

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

希望这能解决:)

【讨论】：

尝试将Flatlist 包裹在具有屏幕尺寸宽度的View 中

这也没有帮助

【参考方案2】：

我复制了您的案例，并通过在您的长文本上放置 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>

告诉我它是否适合你！

【讨论】：

我记得在发布问题之前我用maxWidth 而不是width 尝试过这个，但没有帮助。谢谢它的工作