React Navigation 版本 5.x：将状态和功能传递到所有屏幕

Question

我正在尝试在具有持久用户授权的反应本机应用程序中配置反应导航。

const Stack = createStackNavigator();

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      jwt: '',
      id:'',
      loading: true,
    };
    this.deleteItem = deviceStorage.deleteItem.bind(this);
    this.loadItem = deviceStorage.loadItem.bind(this);
    this.loadItem();
  }

  newJWT = (jwt) => {
    this.setState({jwt});
  };
  newID = (id) => {
    this.setState({id});
  }
 
 componentDidMount(){
    this.loadItem();
  }
  
  render() {
   if (!this.state.jwt) {
      return (
        <NavigationContainer>
          <Stack.Navigator headerMode='null'>
          <Stack.Screen name="Login" component={LoginScreen}/>
          <Stack.Screen name="Signup" component={SignUpScreen}/>
          </Stack.Navigator>
        </NavigationContainer>
      );
    } else {
      return (
        <NavigationContainer>
          <Stack.Navigator headerMode='null'>
           <Stack.Screen name="AuthHome" component={AuthHomeScreen}/>
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
  }
}

我需要将 jwt 和用户 id 传递给所有经过身份验证的屏幕，并将 newJWT 等函数传递给 LoginScreen.So 我可以使用该函数来更新 jwt 和用户 id。

我不想使用 React Hooks 或 Redux 来构建这个应用程序。

1. 我不知道如何将 jwt 和 id 传递给所有经过身份验证的屏幕
2. 如果通过了，我需要知道如何访问 LoginScreen 中的 jwt,id 道具？

谁能帮我解决这些问题？

Answer 1

您可以在 React Native 中使用 React 上下文提供程序。这可以防止使用 props，并允许您将变量和函数传递给提供程序内部的任何组件。

阅读更多here