在 createMaterialTopTabNavigator 中使用 navigation.navigate

Question

我开始使用 react-native，我正在尝试制作一个“hello word”应用程序来看看它是如何工作的。 我在屏幕顶部制作了一个带有“标签”的菜单

在 app.js 中，我添加了 createStackNavigator 来设置我的路线 App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

这是我的主屏幕，我在其中设置标签。

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

现在在我的一个 BScreen 选项卡上，我想点击一个按钮，我希望它可以加载屏幕 (CScreen)

imports ...
export default class BScreenextends Component{

    render(){
        return(
            <View>
               <TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
                <Text>Click here to open CScreen</Text>
                   </TouchableHighlight>
            </View>
        );
    }
}

它可以正确渲染所有组件，唯一的问题是当我单击按钮显示 CScreen 时，没有任何反应。 就好像加载 Tab 我失去了我的导航器的 instacia。

Main
 Tab 
 A
 B Button (Open CScreen) ~> this is not working

如何通过选项卡内的按钮打开屏幕？

[编辑] Console.log 屏幕B

https://imgur.com/a/teAzpn5

Answer 1

我认为您正在尝试实现 StacksOverTabs 模式的导航设置，

您犯的错误是Main screen 是一个普通组件，您在其中渲染了 Tab 组件，即 createMaterialTopTabNavigator。因此，Tab 组件不会从 StackNavigator 获得正确的导航道具

相反，您必须将 Main 屏幕本身设为 createMaterialTopTabNavigator。

例如，

 const AppNavigator = createStackNavigator({     
     Main: { screen: MainTab}, // MainTab is itself a TabNavigator now
     CScreen: {screen: FormCScreen},
 });

 const MainTab = createMaterialTopTabNavigator(
   {
      A: AScreen,
      B: BScreen,
   },
   {
     tabBarPosition: 'top',

   });
 );

查看 GitHub 中的官方示例代码，其中导航到 StacksOverTabs

https://github.com/react-navigation/react-navigation/tree/master/examples/NavigationPlayground/js

谢谢。

Answer 2

我相信你也可以把它放在你的 App 类的顶部：

static router = AppNavigator.router;

这里有更多信息：https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator