在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 ScreenB

https://imgur.com/a/teAzpn5

Answer 1

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

您犯的错误是Main屏幕是普通组件，在其中已呈现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

谢谢。