React Native出现Invalid Hook报错，如何将colorScheme传入config配置？

报错根因 #

useColorScheme是React Hook，只能在React函数组件或自定义Hook的顶层作用域调用，你当前在普通JS模块的全局作用域调用Hook，违反了Hook的使用规则，所以触发Invalid Hook call报错。

解决方案 #

方案1：使用NativeBase内置系统颜色模式适配（推荐）

不需要手动调用useColorScheme，直接开启自带的系统颜色模式跟随即可，修改你的主题代码如下：

import {extendTheme} from 'native-base'

const config = {
    // 开启后NativeBase会自动同步系统颜色模式，无需手动赋值
    useSystemColorMode: true,
    // 可自行设置兜底的初始颜色模式
    initialColorMode: 'light'
}

const colors={
    primary:{
        50: '#EEF2F6',
        100: '#CFD9E7',
        200: '#B1C1D8',
        300: '#92A9C9',
        400: '#7491B9',
        500: '#5578AA',
        600: '#446088',
        700: '#334866',
        800: '#223044',
        900: '#111822'
    }
}
export default extendTheme({config,colors})

修改后直接在入口组件正常引入主题传给NativeBaseProvider即可生效。

方案2：手动自定义控制颜色模式

如果有特殊需求需要自己控制颜色模式，将useColorScheme的调用移到入口组件的顶层，动态给NativeBaseProvider传值即可：
主题文件和上面一致即可，入口组件代码参考：

import { NativeBaseProvider } from 'native-base';
import { useColorScheme } from 'react-native';
import theme from './theme'; // 替换为你实际的主题文件路径

export default function App() {
  const colorScheme = useColorScheme();
  return (
    <NativeBaseProvider 
      theme={theme}
      colorMode={colorScheme}
    >
      {/* 你的应用业务组件 */}
    </NativeBaseProvider>
  )
}

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