Question

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

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

但是，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。我现在遇到的问题如下：

如果我给scrollview contentcontainerstyle flexGrow：1，那么滚动正常进行，但是我不能给flexview值的scrollview空间维度的子级部分。但是，如果给scrollview flex：1（而不是flexGrow），则可以给子节指定空间尺寸，但是滚动功能被禁用。任何帮助将不胜感激！

Answer 1

问题是您将memberArea内的内容设置为根据内容增长，但在memberArea之外的内容是固定的。在flex: 1的{{1}}中添加View样式。

App

然后，您无需为<View style={{flex: 1}}> // App设置contentContainerStyle

为什么要设置ScrollView？首先检查doc。

这里是codesandbox

Answer 2

正确阅读Flexbox上的React-Native文档。 [https://facebook.github.io/react-native/docs/flexbox.html][1]

不能将“较高”值设置为“父视图”的子视图。如果要将父级的Flex：1划分为2个子级，则可以对这两个子级执行Flex：0.5和Flex：0.5。如果您希望每个孩子都有自己的空间，请为每个孩子分配Flex：1。

查看文档和其他文章以了解更多详细信息。

反应本机滚动视图和Flex子级

2 个答案: