代码之家 › 专栏 › 技术社区 › pfust75

React Native:Flex for ScrollView不起作用

react-native-flexbox flexbox react-native css ios

pfust75 · 技术社区 · 7 年前

我有一个简单的视图,它有两个子视图,另一个视图和一个滚动视图。使用flexbox时,ScrollView应该比同一级别的视图高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属性。。。

你知道如何用ScrollView实现1:5的比例吗?

2 回复 | 直到 7 年前

ReyHaynes 7 年前

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>

Neel Gala 7 年前

为了实现1:5的屏幕比例,相对于父视图具有子组件视图和滚动视图,您可以按以下方式对其进行编码:

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