flexDirection не работает с scrollview

Question

Я пытаюсь создать сетку с помощью ScrollView, но не получаю ожидаемого результата

<Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
        <Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
        <Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
        <Text style={{width:100, height:100, backgroundColor:'red'}} >Text</Text>
      </ScrollView>

РЕЗУЛЬТАТ: введите описание изображения здесь

Answer 1

Вы должны добавить стиль к вашему ScrollView contentContainerStyle, чтобы иметь flexDirection: 'row' и flexWrap: 'wrap'

import React, { Component } from 'react';
import { Text, StyleSheet, ScrollView } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <Text style={styles.cell}>
        </Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  cell: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
});

Answer 2

Обернуть каждый текст в представление

<View>
   <Text style={{width:100, height:100, backgroundColor:'red'}}>Text</Text>
</View>