React Native开发中flexWrap属性不生效是什么原因？

问题根源 #

你当前布局不换行的核心原因是承载所有子句段的父容器sentence仅设置了横向排列，未开启换行属性，只有子级的subsentence开启了换行，无法解决不同子句段之间的横向溢出问题。同时你代码里还有几个样式写法错误也会干扰布局效果：

• React Native 不支持带px后缀的尺寸单位，所有数值直接写数字即可
• TextInput未设置固定宽度，会导致输入框尺寸异常挤压相邻文字
• React Native 的View默认就是flex布局，无需额外声明display: 'flex'

修复方案 #

修改你的StyleSheet配置如下即可：

const styles = StyleSheet.create({
    question: {
        marginTop: 20,
        marginRight: 30,
        marginLeft: 30
    },
    blank: {
        backgroundColor: "white",
        width: 60, // 可根据需求调整输入框宽度
        minHeight: 20,
        marginHorizontal: 4 // 加左右边距和文字隔开更美观
    },
    sentence:{
        flexDirection: 'row',
        flexWrap: 'wrap' // 新增：父容器开启换行，不同子句段溢出后会自动换行
    },
    subsentence: {
        flexDirection: 'row',
        flexWrap:'wrap'
    }
})

如果还有局部文字换行异常，可以把同一行的相邻Text组件放到同一个父级Text容器里，而不是用View包裹，React Native的Text内部文字天生支持自动换行，能避免flex布局的换行兼容问题。

内容的提问来源于stack exchange，提问作者csuarez94