React Native Scroll View 和 Flex Children

Question

我在使用滚动视图和弹性尺寸时遇到了很多麻烦。基本上，应用程序的初始屏幕应显示顶部“横幅”，而底部是“内容”。

内容将包含许多“卡片”，每张卡片都包含信息，用户将能够向下滚动以查看下一张卡片，以及下一张卡片，等等。

但是，flex 属性似乎根本不起作用，我什至无法为“横幅”部分和“内容”部分创建适当的大小。

这是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TextInput
{ from 'react-native';


import RestaurantCard from './common/RestaurantCard';

export default class MemberArea extends Component<Props> {
  constructor(props){
    super(props);
    this.state = {
      searchText: ''
    }
  }

  render() {
    return (
      <ScrollView contentContainerStyle = {styles.contentContainer}>
        <View style={styles.banner}>
          <TextInput style={styles.search}
            underlineColorAndroid='rgba(0,0,0,0)'
            placeholder="Search for Restaurants"
            textAlign= 'center'
            textAlignVertical='center'
            returnKeyType="search"
          />
        </View>
        <Text style={styles.dropdown}>
          {"What's nearby V"}
        </Text>
        <View style={styles.cards}>
          <RestaurantCard />
        </View>
      </ScrollView>
    );
  }
}


const styles = StyleSheet.create({
  contentContainer:{
    flexGrow: 1,
    flexDirection: 'column'
  },
  cards:{
    flex:3,
    backgroundColor:'#000000'
  },
  banner: {
    flex:15,
    backgroundColor: '#F36B45',
    paddingBottom: 80
  },
  search:{
    marginTop: 20,
    paddingBottom: 5,
    paddingTop: 5,
    height: 30,
    marginHorizontal: 40,
    borderRadius: 20,
    backgroundColor: 'rgb(255,255,255)'
  },
  dropdown:{
    color: 'black',
    fontWeight:'900',
    fontSize:24,
    margin:30
  }


});

更新：如下面的评论所示，我用另一个视图包围了我的滚动视图。我给了父视图 Flex:1。我现在遇到的问题如下：

如果我给滚动视图 contentcontainerstyle flexGrow: 1，那么滚动会正常工作，但我不能给滚动视图空间维度的子部分提供 flex 值。但是，如果我给 scrollview flex:1（而不是 flexGrow），那么我可以为子部分提供空间尺寸，但滚动功能被禁用。任何帮助将不胜感激！

Answer 1

您遇到的问题是您将内部内容设置memberArea为根据内容增长，但在外部memberArea，它是固定的。添加flex: 1样式到Viewin App.

<View style={{flex: 1}}> // App

那么你就不需要contentContainerStyle设置ScrollView

为什么要设置flex: 15？首先检查文档。

这是代码和框