如何在反应导航5中的嵌套导航中将道具从顶部导航传递到屏幕

Question

我有一个嵌套导航器设置的案例。 app.js 保持已登录状态，并且导航器在 app.js 中调用 startnav 并传递已登录状态：

    class StartupNav extends Component {
  constructor(props) {
    super(props);
    console.log(props.loggedIn);
  }

  render() {
    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          {this.props.loggedIn ? (
            <>
              <Stack.Screen name="MainContainer" component={MainContainer} />
            </>
          ) : (
            <Stack.Screen
              name="AuthStack"
              component={AuthStack}
              params="that" //props pass attempt which isnt successful
            />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default StartupNav;

authStack 将登录部分保存为：

   class AuthStack extends Component {
  constructor(props) {
    super(props);
    console.log('props from authstack', props);
  }
  render() {
    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

然后是登录屏幕，我在其中执行登录逻辑并尝试在 app.js 中设置状态 loggedIn=true。登录成功后，我需要打开包含已登录应用程序屏幕的 MainContainer。

我无法将上层 navScreen 的 props 传递到下层，以便在登录成功时调用 prop 函数。我像往常一样按照代码中的注释进行了尝试，但这甚至无效。 任何人都可以对此有所了解，或指出正确的方向。

我正在使用反应导航 5。

Answer 1

我认为您可以使用上下文 (https://reactjs.org/docs/context.html) 来做到这一点

我在这里创建了一个示例小吃https://snack.expo.io/wzqRLEbi4

const LoginContext = React.createContext({
  loggedIn: false,
  setLogin: () => {},
  setLogout: () => {}
});

export default class App extends Component {

  constructor(props) {
    super(props);
    this.setLogin = () => {
      this.setState({
        loggedIn: true
      })
    };

    this.setLogout = () => {
      this.setState({
        loggedIn: false
      })
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      loggedIn: false,
      setLogin: this.setLogin,
      setLogout: this.setLogout
    };
  }

  render() {
    return (
      <LoginContext.Provider value={this.state}>
        <NavigationContainer independent={true}>
            <Stack.Navigator>
              {this.state.loggedIn ? (
                <>
                  <Stack.Screen name="MainContainer" component={MainContainer} />
                </>
              ) : (
                <Stack.Screen
                  name="AuthStack"
                  component={AuthStack}
                  params="that" //props pass attempt which isnt successful
                />
              )}
            </Stack.Navigator>
          </NavigationContainer>
        </LoginContext.Provider>
    );
  }
}

class Login extends Component {
  tryLogin = (setLogin) => {
    // your login logic 
    let isLoginSuccess = true;

    // if success
    setLogin();
  }
  render() {
    return (
      <LoginContext.Consumer>
      {({setLogin}) => (
        <View style={{justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity onPress={() => this.tryLogin(setLogin)}><Text>Login</Text></TouchableOpacity>
      </View>
      )}
      </LoginContext.Consumer>
    )
  }
}