react-native - 与 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。放入相关的反应导航。

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