在React Native中具有多个ScrollView的多个Flexbox行



我正在尝试使用React Native在iPhone中使用两个行构建视图。我想有两排等高相等的滚动视图。我找不到太多的文档。我是以下代码,但它只是彼此呈现。

      <View style={Styles.splitView}>
        <View style={Styles.splitViewLeft}>
          <ScrollView>
              <Text>Test1</Text>}
          </ScrollView>
        </View>
        <View style={Styles.splitViewRight}>
          <ScrollView>
            {
              <Text>Test2</Text>
            }
          </ScrollView>
        </View>
      </View>
      splitView: {
        flexDirection: 'row'
      },
      splitViewLeft: {
        flex: 3
      },
      splitViewRight: {
        flex: 2
      },

这可以完成工作:

<View style={{flex: 1}}>
  <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
    <Text>Test1</Text>
  </ScrollView>
  <ScrollView style={{flex: 1, backgroundColor: 'yellow'}}>
    <Text>Test2</Text>
  </ScrollView>
</View>

在两个<ScrollView />上应用样式flex: 1以使其高度相等。

如果将其包装在父级<View />中,则必须将flex: 1也应用于<ScrollView />

最新更新