跳转至下一页面获取global变量时出现“Undefined is not an object”错误

你遇到的问题核心是异步执行时机不匹配：AsyncStorage.getItem是异步操作，App.js里的useEffect会在组件挂载后才启动这个异步任务，而你跳转页面的动作大概率比这个任务完成得更早——此时global.language还没被赋值，直接访问自然会报"Undefined is not an object"。

下面给几个实用的解决思路，按需选择：

1. 目标页面加兜底判断 #

在需要调用global.language.stringname的页面，先判断变量是否存在，或者用可选链操作符规避报错：

// 写法1：条件判断
{global.language && <Text>{global.language.stringname}</Text>}

// 写法2：可选链操作符（ES2020+支持，更简洁）
<Text>{global.language?.stringname}</Text>

2. 等语言配置加载完成再开放跳转 #

在App.js里用状态标记语言加载状态，只有加载完成后才渲染可跳转的页面内容：

function App() {
  const [langLoaded, setLangLoaded] = React.useState(false);

  React.useEffect(() => {
    AsyncStorage.getItem('langflag').then(
      (value) => {
        global.language = value == 1 
          ? require('../components/atomic/ar.json') 
          : require('../components/atomic/en.json');
        setLangLoaded(true); // 标记加载完成
      },
      (error) => setToken({ error })
    );
  }, []);

  // 未加载完时显示加载态
  if(!langLoaded) return <ActivityIndicator />;

  // 加载完成后渲染页面内容
  return (
    {/* 你的路由/页面组件 */}
  );
}

3. 改用状态管理工具（更推荐） #

global变量在React Native中容易出现不可控的全局状态问题，更稳妥的方式是用Context API管理语言配置，确保所有页面能同步获取到有效数据：

第一步：创建语言Context #

// LanguageContext.js
import React from 'react';

const LanguageContext = React.createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = React.useState(null);

  React.useEffect(() => {
    AsyncStorage.getItem('langflag').then(
      (value) => {
        const langData = value == 1 
          ? require('../components/atomic/ar.json') 
          : require('../components/atomic/en.json');
        setLanguage(langData);
      },
      (error) => console.error(error)
    );
  }, []);

  // 语言加载完成前显示加载态
  return (
    <LanguageContext.Provider value={language}>
      {language ? children : <ActivityIndicator />}
    </LanguageContext.Provider>
  );
};

export default LanguageContext;

第二步：在App.js中包裹Provider #

// App.js
import { LanguageProvider } from './LanguageContext';

function App() {
  return (
    <LanguageProvider>
      {/* 你的路由/页面内容 */}
    </LanguageProvider>
  );
}

第三步：在目标页面使用Context #

// 目标页面组件
import React from 'react';
import LanguageContext from './LanguageContext';

function TargetScreen() {
  const language = React.useContext(LanguageContext);

  return <Text>{language.stringname}</Text>;
}

内容的提问来源于stack exchange，提问作者WaqasArshad