React-Native Scrollview不起作用

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

在重新閱讀了對您的完整代碼有更好理解的問題之后，很明顯，最快的解決方法是在Area 1和Area 2的視圖上定義minHeight 。 我們可以根據window的Dimensions來計算它。 這樣，您可以以最少的內容獲得33％/ 66％的比率，並根據需要使用其他內容擴展任一區域。

將其放在render（）的頂部：

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

添加到區域1的樣式

minHeight: height / 3

並以2區的風格

minHeight: (height / 3) * 2