反应导航切换导航从另一个文件导入类后不工作

Question

你好请参阅我的代码在这里：

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

我创建了我的开关导航从App.js到Second.js页面间导航

在App.js页我已经进口的名为App1的Second.js文件模块，它的工作原理文件。

此外，我没有在页面上输入应用程序组件从App.js但开关等导航仪显示的错误上Second.js文件同样的事情说

路线“应用程序”的组成部分必须是一个阵营的组成部分。

我做了互联网上搜索一样，并试图从进口{}应用程序从“./App”更换我imporing语法;从“./App”导入应用;

您可以检查世博https://snack.expo.io/@ersimransingh/navigation-problem我的代码

Answer 1

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

下面是一个例子：App.js

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

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

const CreateTag = createAppContainer(AppContainer);

FirstScreen.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>
        );
      }
    }

SecondScreen.js

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

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

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

我希望这有帮助。