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>

结果： enter image description here

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>