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

Question

我对本机反应很新，所以请仔细解释。我有 3 个文件App.js SplashAndLogin.js和Register.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);

所以总结一下，我可以进入每个屏幕，除非我在 Register.js 文件上并尝试导航到HomeScreen它会抛出错误

“路由'HomeScreen'的组件必须是一个反应组件例如......”

Answer 1

使用状态改变 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

请参阅 ScreenProps 的文档

Answer 2

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

您不能从当前 AppContainer 调用另一个 AppContainer 中的视图

this.props.navigation

指当前导航