javascript - 在 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 屏幕是一个普通组件，您在其中渲染了 Tab 组件，即 createMaterialTopTabNavigator。因此 Tab 组件不会从 StackNavigator 获得正确的导航 Prop

相反，您必须使 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

谢谢。