Question

嗨，请在这里查看我的代码：

https://snack.expo.io/@ersimransingh/navigation-problem

我已经创建了切换导航器，以便在从App.js到Second.js的页面之间导航

在App.js页面上，我导入了名为App1的Second.js文件模块，该模块可正常工作。

此外，我对从App.js导入的App组件中的Second.js文件执行了相同的操作，但是swith navigator在页面上显示错误

路线“ App”的组件必须是React组件。

我确实在互联网上搜索了相同的内容，并尝试从从“ ./App”导入{App}；至从“ ./App”导入应用；

您可以在博览会上查看我的代码 https://snack.expo.io/@ersimransingh/navigation-problem

Answer 1

您有App.js，它正在使用Second.js创建路由，而Second.js正在使用App.js创建路由。这肯定是有问题的，因为您正在创建参考。相反，您应该在一个地方创建导航并在App.js中使用它

这里是一个示例： App.js

<link rel="stylesheet" href="main.css">

FirstScreen.js

  export default class App extends React.Component{
      render(){
        return(
          <CreateTag />
        );
      }
    }

const AppContainer = createSwitchNavigator({
  FirstScreen,
  SecondScreen 
});

const CreateTag = createAppContainer(AppContainer);

SecondScreen.js

    export default class FirstScreen extends React.Component {
      render() {
        let { navigation } = this.props;

        return (
          <View>
            <Text
              style={styles.sampleText}
              onPress={() => navigation.navigate('SecondScreen')}>
              First screen
            </Text>
          </View>
        );
      }
    }

以下是完整的示例：https://snack.expo.io/S1cY9IVEV 您也可以从官方示例中查看：https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/App.js

我希望这会有所帮助。

从另一个文件导入类后，React Navigation Switch Navigator无法正常工作

1 个答案: