React Native：用于 ScrollView 的 Flex 不起作用答案

【问题标题】：React Native: Flex for ScrollView doesn't workReact Native：用于 ScrollView 的 Flex 不起作用
【发布时间】：2018-05-06 14:55:31
【问题描述】：

我有一个简单的 View，它有两个孩子，另一个 View 和一个 ScrollView。 ScrollView 应该比同级别的 View 高 5 倍，使用 flexbox。

<View style={{ flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
    </ScrollView>
  </View>

所以我只是简单地将 flex:1 和 flex:5 添加到子视图中，但是在渲染视图中它们都正好适合屏幕的一半。看起来好像这两个 flex 属性被忽略了......

顺便说一句，使用第二个 View 而不是 ScrollView 就可以了！

任何想法如何使用 ScrollView 实现 1:5 的比例？

【问题讨论】：

标签： ios css react-native flexbox react-native-flexbox

【解决方案1】：

ScrollView 是一个不继承flex 使用的组件。您要做的是将 ScrollView 包装在一个 View 中，这将创建您想要的弹性比率。

  <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <View style={{flex: 5}}>
      <ScrollView style={{backgroundColor: 'skyblue'}}>
            <Text style={{ fontSize: 100}}>Scroll me plz</Text>
            <Text style={{ fontSize: 100}}>Scroll me plz</Text>
      </ScrollView>
    </View>
  </View>

【讨论】：

【解决方案2】：

为了实现 1:5 的屏幕比例，相对于父 View 有子组件 View 和 ScrollView，你可以这样编码：

<View style={{ flex: 1}}>
    <View style={{flex: 1/5, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
    </ScrollView>
  </View>

【讨论】：

与标记为正确的答案一样好:)