ReactNative - Özel NavigationBar bileşenim neden ekranın altında işleniyor?

Question

React'ın Navigator ve this custom NavigationBar component'u kullanarak ekranın üst kısmındaki gezinme çubuğunu görüntülemek istiyorum.

Aşağıdaki kodu kullanıyorum, ama nedense gezinti çubuğu ekranın alt kısmında kılar:

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 gerektiği gibi görüntüleniyor, ancak NavigationBar yerleştirilir neden hiçbir fikrim yok başka bir yerde başka alt daha navbar koymak istiyorsanız ekranın alt ...

Answer 1

, sen gezinme çubuğu üzerinde mutlak konumlandırma gerekir.

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