React-native Scrollview 不起作用答案

【问题标题】：React-native Scrollview not workReact-native Scrollview 不起作用
【发布时间】：2017-07-10 01:24:29
【问题描述】：

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

图片：

代码：

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>

我是怎么解决的？

【问题讨论】：

什么是Container？你确定它应该是顶级组件吗？
@VojtaNovak 我添加了容器组件代码，它是一个简单的包装器，用于在将成为您的孩子的所有页面中添加全局警报。
考虑使用flexGrow: 1 而不是flex: 1。 flex 属性是 flexGrow 和 flexShrink 的简写，后者可能会影响您的设计
我尝试使用 flexGrow 但不适用于我的情况。

标签： javascript react-native scrollview

【解决方案1】：

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

把它放在 render() 的顶部：

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

添加到区域 1 的样式

minHeight: height / 3

和2区的风格

minHeight: (height / 3) * 2

【讨论】：

Styles.container 有一个 {flex: 1}，当我使用 contentContainerStyle 时，布局不会滚动，但可以在屏幕内调整，我希望内容有滚动。
我最初误解了一些事情。检查当前答案。如果可以的话，我通常会避免使用维度，但通常更容易根据屏幕/窗口计算原始值以实现特定行为。您可能还需要在 minHeight 计算中调整标题的高度。