Question

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

＆＃13;

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

＆＃13;

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

顺便说一下，使用第二个View代替ScrollView就可以了！

如何使用ScrollView实现1：5的比例？

Answer 1

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

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

React Native：Flex for ScrollView不起作用

2 个答案: