与TabNavigator和StackNavigator完全一致的反应导航问题

时间:2018-01-28 18:27:21

标签: react-native react-native-android react-navigation tabnavigator stack-navigator

嗨我的反应导航器确实有TabNavigator和StackNavigator的问题。 问题是,当我把它放在TabNavigator中时StackNavigator不起作用

我在App.js中有这个部分,在这部分我声明了我的stackNavigator

import uno  from './android/Componentes/uno'
import dos  from './android/Componentes/dos'
import tres  from './android/Componentes/tres'
import inde from './android/Componentes/inde'
import Bonton from './android/Componentes/Bonton'
class App extends Component{
 render(){
  return(
    <inde />
);
}
}
const Root = StackNavigator ({
  inde:{screen:inde},
  uno:{screen: uno},
  dos:{screen: dos},
  tres:{screen: tres},
  Bonton:{screen:Bonton}
});

export default Root;

在这部分(inde.js)中我声明了我的TabNavigator

 import uno  from './uno'
 import dos  from './dos'
 import tres  from './tres'

 export default class inde extends Component{
   render(){
     return(
       <Root />
     );
   }
 }
 const Root = TabNavigator ({
    uno:{screen: uno},
    dos:{screen: dos},
    tres:{screen: tres}
  });

和uno.js中的这个

export default class uno extends Component{
render(){
    return(
        <Button
    onPress={() => this.props.navigation.navigate('Bonton')}
    title="Go to Lucy's profile"
  />
    );
}
}
我做错了什么?

1 个答案:

答案 0 :(得分:0)

试试这个。我建议你创建navigator.js。放入相关的反应导航。

 // App.js
    import uno  from './android/Componentes/uno'
    import dos  from './android/Componentes/dos'
    import tres  from './android/Componentes/tres'
    import inde from './android/Componentes/inde'
    import Bonton from './android/Componentes/Bonton'
    class App extends Component{
     render(){
      return(
        <inde />
    );
    }
    }
    const RootStackNavigator = StackNavigator ({
      inde:{screen:inde},
      uno:{screen: uno},
      dos:{screen: dos},
      tres:{screen: tres},
      Bonton:{screen:Bonton}
    });

    const RootTabNavigator = TabNavigator ({
      stackNav: {screen: RootStackNavigator },
      uno:{screen: uno},
      dos:{screen: dos},
      tres:{screen: tres}
    });


    export default RootTabNavigator;

    // index.js

    export default class index extends Component{
      render(){
        return(
          <RootTabNavigator />
        );
      }
    }