react-props - 上下文 API 无法在反应导航 5 中传递数据

Question

我正在尝试实现上下文 API 以响应导航 5，以便在整个应用程序中全局传递语言环境。

我正在关注 Expo 文档中关于本地化的示例：https ://reactnavigation.org/docs/localization/

应用程序.js

import React from 'react';
import { NavigationContainer } from "@react-navigation/native";
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

import AppNavigator from './AppNavigator';
import StartupScreen from "../screens/StartupScreen";

const en = {
    hello: 'Hello',
    welcome: 'Welcome',
  };  
const es = {
    hello: 'Hola',
    welcome: 'Bienvenido',
};
i18n.fallbacks = true;
i18n.translations = { en, es };

export const LocalizationContext = React.createContext();

export default function App() {       
    const [locale, setLocale] = React.useState(Localization.locale);
    const localizationContext = React.useMemo(
        () => ({
        t: (scope, options) => i18n.t(scope, { locale, ...options }),
        locale,
        setLocale,
    }), [locale]);
  console.log(locale);
  return (
    <LocalizationContext.Provider value={localizationContext}>
        <NavigationContainer>  
            <AppNavigator />            
        </NavigationContainer>  
    </LocalizationContext.Provider>
  );
}

一切似乎都很好，应用程序按预期加载。然后当我尝试转到包含以下代码的语言屏幕时

import React, { useState, useContext } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import i18n from 'i18n-js';

const en = {
  hello: 'Hello',
  welcome: 'Welcome',
};  
const es = {
  hello: 'Hola',
  welcome: 'Bienvenido',
};
i18n.fallbacks = true;
i18n.translations = { en, es };

const LanguageScreen = (props) => {  
  const { t, locale, setLocale } = useContext(LocalizationContext);

  return (
    <View style={styles.screen}>
      <Text>Language Screen</Text>
      <StatusBar hidden />
      <Text style={styles.text}>
        Current locale: {locale}.{' '}
        {locale !== 'en' && locale !== 'es' 
          ? 'Translations will fall back to "en" because none available'
          : null}
      </Text>
      <Text>{t('hello')}</Text>
      <Text>{t('welcome')}</Text>
      {locale === 'en' ? (
        <View>
          <Button title="Switch to Spanish" onPress={() => setLocale('es')} />          
        </View>
      ) : (
        <View>
          <Button title="Switch to English" onPress={() => setLocale('en')} />         
        </View>
      )}
    </View>
  );
};

export default LanguageScreen;

我收到错误“找不到变量：LocalizationContext ”

看起来周围的 LocalizationContext 包装器没有传播。

标签： react-propsreact-contextreact-navigation-v5react-localization

Answer 1

你需要导入LocalizationContext

import { LocalizationContext  } from './App.js';