React Native Context，如何在多个嵌套文件和组件之间共享上下文

Question

我是 React Native 的新手，我坚持在不同文件中的组件之间传递上下文基本上我正在按照反应导航身份验证流程 https://reactnavigation.org/docs/auth-flow/ 构建登录流程我的场景如下所示：

在App.js 带有 Login/Register/Home 的堆栈屏幕，显示 Login/Register 或基于登录状态的主页主屏幕由抽屉组件制作，使用自定义抽屉和两个组件（主页和关于）

//VARIOUS IMPORT    
const Drawer = createDrawerNavigator();

const HeaderOption = () => ({
  headerShown: false,
  // animationTypeForReplace: state.isSignout ? 'pop' : 'push',
});

const AppStack = createStackNavigator();

const AuthContext = createContext();

//THE DRAWER FOR HOME
function DrawerNavigator(props) {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => MyDrawer(props)}
    >
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="About" component={About} />
    </Drawer.Navigator>
  );
}
//MAIN APP
export default function App({ navigation }) {
  const [state, dispatch] = useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: null,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
      }

     
      dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };

    bootstrapAsync();
  }, []);

  const authContext = useMemo(
    () => ({
      signIn: async (data) => {
        // LOGIN PROCEDURE

        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async (data) => {
        // SUBSCRIBE PROCEDURE

        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  );

  if (state.isLoading) {
    // We haven't finished checking for the token yet
    return (
      <View>
        <Text>Loading</Text>
      </View>
    );
  }
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <AppStack.Navigator initialRouteName="Login">
          {state.userToken == null ? (
            <>
              <AppStack.Screen
                name="Login"
                component={LoginScreen}
                options={HeaderOption}
              />
              <AppStack.Screen
                name="Register"
                component={RegisterScreen}
                options={HeaderOption}
              />
            </>
          ) : (
            <AppStack.Screen
              name="HomeApp"
              component={DrawerNavigator}
              options={HeaderOption}
            />
          )}
        </AppStack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

在LoginScreen.js 有效登录屏幕（如果未登录，则在应用程序启动时显示）

//import

export default function LoginScreen(props) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { signIn } = useContext(AuthContext);

  return (
    <View
      style={{
        flex: 1,

        backgroundColor: Constants.MAIN_GREEN,
      }}
    >
      <View style={{ ...styles.container }}>
        <StatusBar hidden={true} />
        <View style={{ ...styles.logoContainer }}>
          <Image
            style={styles.logoIcon}
            source={require('../assets/logo_popeating_amp.png')}
          />
        </View>

        <View style={{ ...styles.inputContainer }}>
          <Image
            style={styles.inputIcon}
            source={require('../assets/mail.png')}
          />
          <TextInput
            autoFocus={true}
            placeholder="Email address"
            onChangeText={(email) => setEmail(email)}
            value={email}
            label="Email"
            style={styles.inputs}
            keyboardType={'email-address'}
          />
        </View>
        <View style={{ ...styles.inputContainer }}>
          <Image
            style={styles.inputIcon}
            source={require('../assets/password.png')}
          />
          <TextInput
            placeholder="Password"
            onChangeText={(password) => setPassword(password)}
            value={password}
            secureTextEntry={true}
            label="Password"
            style={styles.inputs}
          />
        </View>
        <TouchableHighlight
          style={[styles.buttonContainer, styles.loginButton]}
          onPress={() => signIn({ email, password })}
          underlayColor={Constants.HI_COLOR}
        >
          <Text style={styles.loginText}>LOGIN</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => props.navigation.navigate('HomeApp')}
          underlayColor={Constants.HI_COLOR}
        >
          <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => props.navigation.navigate('Register')}
          underlayColor={Constants.HI_COLOR}
        >
          <Text>Register</Text>
        </TouchableHighlight>
      </View>
    </View>
  );
}



const styles = StyleSheet.create({
  //styles
});

在DrawerContent.js 主页的抽屉，其中包含一个 link 到主页，一个 link 到关于，一个 link 到注销

在Home.js 主页面是抽屉的初始路径

每次我尝试启动应用程序时错误是 未处理的承诺拒绝：ReferenceError：找不到变量：AuthContext

LoginScreen 似乎无法访问 AuthContext，如何让 AuthContext 可用于文件之间的其他组件？

Answer 1

您可以将上下文创建放在单独的文件中

//AuthContext.js
const AuthContext = createContext();
export default AuthContext;

在 app.js 中，您可以简单地导入并使用它

import AuthContext from './AuthContext.js';

你也可以为 login.js 做同样的事情然后它将按预期工作。

React Native Context，如何在多个嵌套文件和组件之间共享上下文

React Native Context, how to share context beetwing multiple nested files and components

react-native

react-native-navigation

react-context