完全使用 TabNavigator 和 StackNavigator 的反应导航问题

Question

嗨，我在使用 react-navigator 时遇到了 TabNavigator 和 StackNavigator 的问题。 问题是，当我将 StackNavigator 放入 TabNavigator 时，它不起作用

我在 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"
  />
    );
}
}

我做错了什么吗？

Answer 1

试试这个。我建议你应该创建 navigator.js。放入相关的react navigation。

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