React Native：Flex for ScrollView不起作用

Question

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

 <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的比例？

Answer 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>

Answer 2

要实现1：5的屏幕比例，相对于父视图具有子组件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>