反应本机滚动视图不起作用

Question

我有以下布局，当屏幕数据较大时需要滚动：

图片：

代码：

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 组件时我的布局坏了：

图片：

代码：

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>

我怎么解决的？

Answer 1

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

将它放在 render() 的顶部：

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

添加到区域 1 的样式

minHeight: height / 3

和2区的风格

minHeight: (height / 3) * 2

反应本机滚动视图不起作用

React-native Scrollview not work

javascript

scrollview

react-native