如何使用return语句上方函数中声明的变量？含AsyncStorage读取主题场景

核心问题在于两点：AsyncStorage读取为异步操作无法同步获取值，上层组件定义的主题变量需要通过合理的状态传递方式才能被下层组件访问，正确实现方式如下：

• 首先在上层组件中使用useState定义响应式的主题状态，组件初始化阶段异步拉取AsyncStorage中存储的主题配置更新状态
  示例代码：

import { useEffect, useState, createContext } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 定义默认主题
const defaultTheme = {
  bgColor: '#ffffff',
  textColor: '#000000',
  primaryColor: '#2196F3'
}
// 创建主题Context用于跨层级传递
export const ThemeContext = createContext();

export default function App() {
  const [theme, setTheme] = useState(defaultTheme);

  useEffect(() => {
    // 异步读取存储的主题
    const loadSavedTheme = async () => {
      try {
        const savedThemeStr = await AsyncStorage.getItem('user_selected_theme');
        if(savedThemeStr) {
          setTheme(JSON.parse(savedThemeStr));
        }
      } catch(err) {
        console.error('读取主题配置失败', err);
      }
    }
    loadSavedTheme();
  }, [])

  return (
    <ThemeContext.Provider value={{theme, setTheme}}>
      {/* 此处放置你的路由/页面组件 */}
    </ThemeContext.Provider>
  )
}

• 下层需要使用主题的组件直接通过useContext获取上层传递的主题变量即可
  示例代码：

import { useContext } from 'react';
import { ThemeContext } from './App';

function HomePage() {
  const { theme } = useContext(ThemeContext);
  return (
    <View style={{backgroundColor: theme.bgColor, padding: 16}}>
      <Text style={{color: theme.textColor, fontSize: 16}}>首页内容</Text>
    </View>
  )
}

• 修改主题时同步更新状态和AsyncStorage存储即可全局生效
  示例代码：

const switchDarkMode = async () => {
  const darkTheme = {
    bgColor: '#121212',
    textColor: '#ffffff',
    primaryColor: '#BB86FC'
  }
  // 更新全局主题状态
  setTheme(darkTheme);
  // 持久化存储到AsyncStorage
  await AsyncStorage.setItem('user_selected_theme', JSON.stringify(darkTheme));
}

注意：不要在同步逻辑中直接获取AsyncStorage的返回值，异步操作的返回结果为Promise对象，直接调用会无法拿到实际的主题配置。如果项目层级较浅不需要全局共享，也可以直接通过props把主题变量从上层组件逐层传递给需要的子组件使用。

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