如何在反应导航 5 的嵌套导航中将道具从顶部导航传递到屏幕 [英] How do I pass props from top navigation to screen within a nested navigation in react navigation 5

问题描述

我有一个嵌套导航器设置的情况.app.js 保持登录状态，导航器开始作为 startnav 在 app.js 中被调用并传递登录状态:

I have a case where I have a nested navigator setting. The app.js holds the loggedIn state and the navigators start as The startnav gets called in app.js passing loggedIn state:

    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 将登录部分保存为:

The authStack holds the login part as :

   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 中设置状态 loginedIn=true.登录成功后，我需要打开包含登录应用程序屏幕的 MainContainer.

Then theres the login screen where I do the login logic and make an attempt to set the state in app.js loggedIn=true. After login is Successful I need to open the MainContainer which contains the loggedin app screens.

我无法将道具从上层导航屏幕传递到下层，以便在登录成功时调用道具功能.我像往常一样按照代码中的注释进行了尝试，但这甚至无效.任何人都可以对此有所了解，或者为我指明正确的方向.

I am unable to pass props from the upper level navScreen to the lowers so that I could call prop function when login is successful. I tried as commented in the code like we normally do but this wasnt even valid. Can anybody shed a light on this, or point me to the right direction.

我正在使用 React 导航 5.

I'm using react navigation 5.

推荐答案

我认为您可以使用上下文 (https://reactjs.org/docs/context.html)

I think you could do that using context (https://reactjs.org/docs/context.html)

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

I created an example snack here 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>
    )
  }
}

这篇关于如何在反应导航 5 的嵌套导航中将道具从顶部导航传递到屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！