反応したネイティブコンポーネントがオーバーラップする理由

Question

2つのコンポーネントをお互いに配置したいと考えています。私のコンポーネントは次のようになります：

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

何らかの理由で、レンダリング時にリストが検索バーに表示されます。なぜflexDirection： '列'はそれらをお互いの下に置かないのですか？

私はフレックスボックスレイアウトについて何か不足しているような気がします。

Answer 1

あなたのstyle.containerには、flexエントリを削除しますが、flexDirectionは保持してください。私はそれが最後の答えから数ヶ月後であることを知っていますが、反応ネイティブを学ぶ人を助けるかもしれないと思います。