如何将屏幕从一个文件切换到另一个文件

Question

我对本机反应很陌生，所以请仔细解释.我有 3 个文件应用程序.jsSplashAndLogin.js 和注册.js 我能够从初始屏幕进入注册屏幕，并在我的注册文件中的组件之间来回切换，但是当需要返回登录屏幕时，我似乎总是收到相同的错误。

我尝试了几种不同的东西，但它们都一直给我同样的错误。 我开始认为我设置文件的方式是错误的。

//App.js

 class App extends Component<Props> {
  render() {
       return (
     <AppContainer/>
    )
  }
}
export default App
const AppSwitchNavigator = createSwitchNavigator(
  {
    Login: {screen: SplashAndLogin},
    //Registe :{screen: Register}
  });

//SplashAndLogin.js
class SplashAndLogin extends Component<Props> {
  render() {
       return (
     <AppContainer/>
    )
  }
}
export default SplashAndLogin;
const SAndLAppNavigator = createSwitchNavigator(
  {
    SandL : {screen: LoadingScreen },
    RegisterScreen : {screen: Register} 
  }
);

//Register.js
export default class Application extends Component<Props> {
    render() {
         return (
        <AppContainer/>
       );
    }
  }
  const AppSwitchNavigator = createStackNavigator(
    {
      Login :{screen: NameScreen},
      PhoneAndEmail: {screen: EmailPasswordScreen},
      HomeScreen: {screen: SplashAndLogin },
      UploadScreen: {screen: CertificateUploadScreen }

    });
  const AppContainer = createAppContainer(AppSwitchNavigator);

所以总而言之，我可以访问每个屏幕，除了 im 在 Register.js 文件上并尝试导航到主屏幕时，它会抛出错误

"路由'主屏幕'的组件必须是反应组件，例如......">

Answer 1

这很正常，您使用的是两个不同的 AppContainer。

不能从当前应用容器调用另一个应用容器中的视图

this.props.navigation

指当前导航

Answer 2

使用状态更改 AppContainer

class RenderAppContainer extends Component {
    constructor(props) {
        super(props);
        this.state = { IsConnected : false } 
        this.changeIsConnected = this.changeIsConnected.bind(this)
    }
    changeIsConnected = () => { 
      this.setState((prevState, props ) => ({ IsConnected : !prevState.IsConnected}))
    } 
    render() {
         cons {IsConnected } = this.state 
         return(
           <React.Fragment>
            {(IsConnected) ? AppContainerOne : AppContainerTwo } 
           </React.Fragment
         )
    }
}

然后，您可以将 changeIsConnected 传递给您的 AppContainer

<AppContainerOne screenProps={{changeConnected: this.changeIsConnected}} />
<AppContainerTwo screenProps={{changeConnected: this.changeIsConnected}} />

https://reactnavigation.org/docs/en/stack-navigator.html

请参阅屏幕道具的文档