ReactNative - カスタムNavigationBarコンポーネントが画面の下部に表示されるのはなぜですか？

Question

ReactのNavigatorとthis custom NavigationBar componentを使用して画面上部にナビゲーションバーを表示したいとします。

私は、次のコードを使用していますが、何らかの理由でナビゲーションバーが画面の下部にレンダリング：

import NavigationBar from 'react-native-navbar' 

class MyDebts extends Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
     selectedTab: 'persons' 
    } 
    } 

    _renderScene(route, navigator) { 
    console.log('render scene with route: ', route) 
    return <route.component route={route} navigator={navigator} /> 
    } 

    render() { 

    return (
     <Provider store={store}> 
     <TabBarIOS selectedTab={this.state.selectedTab}> 
      <TabBarIOS.Item 
       selected={this.state.selectedTab === 'persons'} 
       title='Persons' 
       onPress={() => { 
        this.setState({ 
         selectedTab: 'persons', 
        }) 
       }}> 
       <Navigator 
       initialRoute={{ name: 'Persons', component: PersonsRootComponent }} 
       renderScene={this._renderScene} 
       navigationBar={<NavigationBar style={styles.nav} title={{title: 'Persons'}}/>} 
       /> 
      </TabBarIOS.Item> 
     </TabBarIOS> 
     </Provider> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    nav: { 
    height: 160, 
    backgroundColor: 'red' 
    } 
}) 

PersonsRootComponentが正しくレンダリング、私はNavigationBarが上に置かれている理由はわかりません画面の下...

Answer 1

あなたが一番下以外のどこかにナビゲーションバーを配置したい場合は、ナビゲーションバー上の絶対位置を必要とします。

container: { width: width, flexDirection: 'row', position:'absolute', top:0, left:0 },