ReactNative - Pourquoi mon composant NavigationBar personnalisé s'affiche-t-il en bas de l'écran?

Question

Je souhaite afficher une barre de navigation en haut de l'écran en utilisant les codes Navigator et this custom NavigationBar component de React.

J'utilise le code suivant, mais pour une raison quelconque la barre de navigation rend au bas de l'écran:

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' 
    } 
}) 

Le PersonsRootComponent rend bien, mais je ne sais pas pourquoi on place le NavigationBar sur la bas de l'écran ...

Answer 1

Si vous voulez mettre la barre de navigation ailleurs autre que le fond, vous avez besoin d'un positionnement absolu sur la barre de navigation.

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