具有多个scrollview的多个flexbox行反应原生

时间:2017-12-05 04:57:39

标签: react-native 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
      },

1 个答案:

答案 0 :(得分:1)

这样做的工作:

<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>

flex: 1上应用样式<ScrollView />,使它们的高度相等。

如果将其封装在父<View />内,则必须将flex: 1应用于<ScrollView />