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

【问题标题】：How do i switch screens from one file to another如何将屏幕从一个文件切换到另一个文件
【发布时间】：2019-07-23 22:03:29
【问题描述】：

我对本机反应很新，所以请仔细解释。我有 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'的组件必须是react组件，例如......”

【问题讨论】：

您的导航系统有问题。
有什么建议吗？

标签： react-native react-navigation stack-navigator react-navigation-stack

【解决方案1】：

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

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

this.props.navigation

指的是当前导航

【讨论】：

【解决方案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

查看 ScreenProps 的文档

【讨论】：