Javascript 如何将ScrollView中的无限内容与React Native对齐？

我一直在尝试使用react native开发一个应用程序，当我尝试在ScrollView中对齐多个TouchableOpacity组件时，根据我的操作方式，会遇到一些问题。有时不能滚动，有时只能滚动一半的组件，有时大小不合适

     <SafeAreaView style={styles.container}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollViewContent}
        >
          <TouchableOpacity style={styles.button}>1</TouchableOpacity>
          <TouchableOpacity style={styles.button}>2</TouchableOpacity>
          <TouchableOpacity style={styles.button}>3</TouchableOpacity>
          <TouchableOpacity style={styles.button}>4</TouchableOpacity>
          <TouchableOpacity style={styles.button}>5</TouchableOpacity>
          <TouchableOpacity style={styles.button}>6</TouchableOpacity>
          <TouchableOpacity style={styles.button}>.</TouchableOpacity>
          <TouchableOpacity style={styles.button}>.</TouchableOpacity>
          <TouchableOpacity style={styles.button}>.</TouchableOpacity>
        </ScrollView>
      </SafeAreaView>

const styles = StyleSheet.create({
  container: {
    flex: 1, // To fit the all screen size.
  },
  scrollView: {
    flex:1, // To fit the all container(SafeAreaView).
  },
  scrollViewContent: {
    flexGrow: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: 'flex-start',
    justifyContent: "space-evenly",
    alignContent: 'space-around',
  },
  button:{
    // Should I use flex here?
    height:"16%",
    width:"25%",
    paddingTop: 10,
    margin: 4
}
});

1.
2.
3.
4.
5.
6.
.
.
.
const styles=StyleSheet.create({
容器：{
flex:1，//适合所有屏幕大小。
},
滚动视图：{
flex:1，//用于安装所有容器（SafeAreaView）。
},
滚动视图内容：{
flexGrow:1，
flexDirection:“行”，
柔性包装：“包装”，
alignItems:'flex start'，
辩护内容：“空间均匀”，
alignContent:'周围的空间'，
},
按钮：{
//我应该在这里使用flex吗？
身高：“16%”，
宽度：“25%”，
paddingTop:10，
保证金：4
}
});

其想法是每行无限次安装3个“按钮”（我假装使用映射功能）

布局示例：

---

因为您正在处理列表，所以使用

FlatList

而不是

Scrollview

。检查此项-将您的高度从百分比更改为无单位值，例如200，滚动将正常工作Hey Rodolfo，我强烈建议不要更改scrollView中内容容器的高度。尝试从

scrollViewContent

中删除

flexGrow

，看看会发生什么：）谢谢@SDushan！我是用FlatList做的！