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);

因此，总结一下，我可以进入每个屏幕，但当im放在Register.js文件上并尝试导航到 HomeScreen 时，它会抛出错误

“路线'HomeScreen'的组件必须是React组件，例如...。

Answer 1

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

您不能从当前AppContainer调用另一个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

请参阅ScreenProps文档

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

2 个答案: