Как использовать flexbox для текстовых компонентов в реагировать нативно?Горизонтальное наложение, вертикальное приращение

Question

Я пытаюсь создать эффект в реагировать на нативный, который, учитывая определенный массив текста, оборачивает и в то же время увеличивает размер по вертикали, создавая новую строку для следующих слов:

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

Я хотел бы продолжить добавление слов в массив, и эти слова должны перейти на следующую строку.Обратите внимание, что «слово» в массиве может содержать пробелы.

Answer 1

Я закончил тем, что сделал решение, которое не изящно:

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

На данный момент я не ожидаю, чтобы было больше, чем определенное количество слов ... Мне, вероятно, понадобится лучшее решениечем это в ближайшем будущем, любая крутая идея будет приветствоваться.