我具有以下布局,并且当屏幕上的数据更大时需要滚动:

图片:

javascript - React-Native Scrollview不起作用-LMLPHP

码:

export default  () => (
  <Container hasNavBar={false}>
    <View style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </View>
  </Container>
);


按照react-native的文档来添加滚动之后,我需要使用ScrollView组件为布局创建一个包装器,但是在添加scrollView组件时,我的布局坏了:

图片:

javascript - React-Native Scrollview不起作用-LMLPHP

码:

export default  () => (
  <Container hasNavBar={false}>
    <ScrollView style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </ScrollView>
  </Container>
);


容器组件

<View style={flex: 1}>
        {this.props.children}
        <DropdownAlert
          closeInterval={10000}
          updateStatusBar={false}
          ref={(ref) => this.dropdown = ref}
          onClose={() => null}/>
      </View>


我该如何解决?

最佳答案

重新阅读问题并更好地理解完整代码后,很明显,最快的解决方法是在区域1和区域2的视图中定义minHeight。我们可以从窗口的Dimensions中计算出来。这样,您可以以最少的内容获得33%/ 66%的比率,并根据需要使用其他内容扩展任一区域。

将其放在render()的顶部:

const { height } = Dimensions.get('window');

添加到区域1的样式

minHeight: height / 3

并以Area 2的风格

minHeight: (height / 3) * 2

10-07 19:25