为什么我的反应本地组件重叠 [英] Why do my react-native components overlap

问题描述

我想把两个组件放在一起。我的组件看起来像这样：

  import从'react'反应; 
从'react-redux'导入{connect}; 
从'react-native'导入{Text，StyleSheet，View，ListView，Switch，TextInput}; 
从'native-base'导入{List，ListItem}; 
从'../shared/search-bar'导入SearchBar; 
 
 const mapStateToProps =（state）=> {
 return {
 movies：state.movi​​es.movi​​es 
}; 
}; 
 
 const mapDispatchToProps =（dispatch）=> {
 return {}; 
}; 
 
 const Component =（{movies}）=> {
 return（
< View style = {styles.container}> 
< SearchBar style = {styles.searchBarContainer} /> 
< List 
 style = {styles.list} 
 dataArray = {movies} 
 renderRow = {movie =>< ListItem>< Text> {movie.title}< / Text>< / ListItem> ;} 
 /> 
< / View> 
）; 
}; 
 
 let styles = StyleSheet.create（{
 container：{
 flexDirection：'column'，
 flex：1，
}，
 searchBarContainer：{
 flex：0 
}，
 list：{
 flex：1 
} 
}）; 
 
导出默认连接（mapStateToProps，mapDispatchToProps）（Component）; 
  

由于某些原因，呈现时，列表只会在搜索栏上呈现。为什么flexDirection：'column'不能将它们放在彼此之下？

我觉得我错过了一些关于flexbox布局的内容。

$ b $在你的style.container中，删除flex条目，但保持flexDirection。我知道自从上个回答已经有几个月了，但我想我们可以帮助其他人尝试学习react-native

I want to position 2 components underneath each other. My component looks like this :

import React from 'react';
import {connect} from 'react-redux';
import {Text, StyleSheet, View, ListView, Switch, TextInput} from 'react-native';
import {List, ListItem} from 'native-base';
import SearchBar from '../shared/search-bar';

const mapStateToProps = (state) => {
    return {
        movies: state.movies.movies
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

const Component = ({movies}) => {
    return (
        <View style={styles.container}>
            <SearchBar style={styles.searchBarContainer}/>
            <List
                style={styles.list}
                dataArray={movies}
                renderRow={movie => <ListItem><Text>{movie.title}</Text></ListItem>}
            />
        </View>
    );
};

let styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        flex: 1,
    },
    searchBarContainer: {
        flex: 0
    },
    list: {
        flex: 1
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Component);

For some reason, when they are rendered, the list is just rendered over the searchbar. Why does the flexDirection:'column' not position them underneath each other?

I feel like I'm missing something about the flexbox layout.

解决方案

in your style.container, remove the flex entry but keep the flexDirection. I know it has been few months since the last answer but I guess we might help other people who try to learn react-native

这篇关于为什么我的反应本地组件重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！