Question

我开始有点反应原生，我试图做一个＆＃34;你好的话＆＃34;应用程序，看它是如何工作的。我用＆＃34; tab＆＃34;做了一个菜单。在我的屏幕顶部

在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

谢谢。

Answer 2

我相信您也可以将其放在App类的顶部：

'user-services-http-two 32370'

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

在createMaterialTopTabNavigator中使用navigation.navigate

2 个答案: