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

【问题标题】：Problems with react-navigation exactly with TabNavigator and StackNavigator与 TabNavigator 和 StackNavigator 完全一致的反应导航问题
【发布时间】：2018-01-28 18:27:20
【问题描述】：

嗨，我对 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"
  />
    );
}
}

我做错了吗？

【问题讨论】：

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

【解决方案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 />
        );
      }
    }

【讨论】：