Javascript 如何在react native中为文本组件使用flexbox？水平包裹，垂直增量

我试图在react native中产生一种效果，即给定特定的文本数组，它会进行包装，同时垂直增加大小，为下一个单词创建新行：

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const styles = StyleSheet.create({
  container: {
    flex: 0.3,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    alignSelf: 'center',
  },
  wordsContent: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  txt: {
    flex: 1,
    flexDirection: 'row',
    alignSelf: 'center',
    width
  }
});

export default class App extends Component<Props> {
  render() {
    const words = ['asdfasdf', 'asdf asdf', 'qwerqwer', 'qwer qwer', 'qwerwwe', 's332', '123123', 'sdfasdf'];
    return (
      <View style={styles.container}>
        <View style={styles.wordsContent}>
          <Text style={styles.welcome}>
            Words:
          </Text>
          {
            words.map((w, i) =>
              <Text style={styles.txt} key={i}>
                {w}
              </Text>
            )
          }
        </View>
      </View>
    );
  }
}

const width=Dimensions.get（'window'）.width；
const height=维度.get（'window'）。高度；
const styles=StyleSheet.create({
容器：{
弹性系数：0.3，
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
对齐自我：“中心”，
},
文字内容：{
弹性：1，
flexDirection:'行'，
flexWrap:“wrap”
},
txt:{
弹性：1，
flexDirection:'行'，
对齐自我：“中心”，
宽度
}
});
导出默认类应用程序扩展组件{
render（）{
const words=['asdfasdf'，'asdfasdf'，'qwerqwer'，'qwerqwer'，'qwerwwe'，'s332'，'123123'，'sdfasdf']；
返回(
话：
{
words.map（（w，i）=>
{w}
)
}
);
}
}

---

我想继续向数组中添加单词，这些单词应该转到下一行。请注意，数组中的“单词”可以有空格。

我最后做了一个不优雅的解决方案：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    alignSelf: 'center',
  },
  wordsWrapper: {
    flex: 1,
    flexDirection: 'row'
  },
  wordsContent: {
    flex: 0.5,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  word: {
    alignSelf: 'center',
    paddingLeft: 5,
    paddingRight: 5
  },
  txt: {
    paddingLeft: 5,
    paddingRight: 5,
    borderWidth: 0.5,
    justifyContent: 'center',
    borderColor: 'black',
  }
});

export default class App extends Component<Props> {
  getWordsPerColumn() {
    const words = ['asdfasdf', 'asdf asdf', 'qwerqwer', '123321', 'asdfasdf', 'asdf asdf', 'qwerqwer', '123321', 'asdf asdf', 'qwerqwer', '123321', 'asdf asdf', 'qwerqwer', '123321', 'qwerqwer', '123321' ];
    const maxColumns = 5;
    const cells = 4;
    let columns = maxColumns;
    if (words.length <= 4) {
      columns = 1;
    } else if (words.length <= 8) {
      columns = 2;
    } else if (words.length <= 12) {
      columns = 3;
    } else if (words.length <= 16) {
      columns = 4;
    }
    const groups = [];
    let groupNumber = 0;
    let keys = 0;
    for(let i = 1; i <= columns; i++) {
      if (!groups[groupNumber]) {
        groups.push([]);
      }
      for(let j = 1; j <= cells; j++) {
        groups[groupNumber].push(
          <Text key={keys} style={styles.word}>
            {
              words[keys]
            }
          </Text>
        );
        keys++;
      }
      groupNumber++;
    }
    return groups;
  }
  render() {
    let key = 0;
    return (
      <View style={styles.container}>
        <View style={styles.wordsContent}>
          <Text style={styles.welcome}>
            Words:
          </Text>
          <View style={styles.wordsWrapper}>
          {
            this.getWordsPerColumn().map((column, i) => (
                <View key={key++} style={styles.txt} >
                  {
                    column.map((w, j) => w)
                  }
                </View>
              )
            )
          }
          </View>
        </View>
      </View>
    );
  }
}

const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
弹性：1，
对齐自我：“中心”，
},
单词说唱者：{
弹性：1，
flexDirection:“行”
},
文字内容：{
弹性系数：0.5，
flexDirection:'列'，
为内容辩护：“中心”，
对齐项目：“居中”，
flexWrap:“wrap”，
},
字：{
对齐自我：“中心”，
paddingLeft:5，
填充右：5
},
txt:{
paddingLeft:5，
paddingRight:5，
边框宽度：0.5，
为内容辩护：“中心”，
边框颜色：“黑色”，
}
});
导出默认类应用程序扩展组件{
getWordsPerColumn（）{
const words=['asdfasdf'、'asdfasdf'、'qwerqwer'、'123321'、'asdfasdf'、'asdfasdf'、'aswerqwer'、'qwerqwer'、'123321'、'qwerqwer'、'123321'；
const maxColumns=5；
常数细胞=4；
设columns=maxColumns；
如果（字数.长度）