反应本机“无效的钩子”答案

【问题标题】：React Native "Invalid Hook"反应本机“无效的钩子”
【发布时间】：2021-11-26 10:43:42
【问题描述】：

我不明白如何将 colorScheme const 放入 config const 中。我收到错误：“无效的 Hook 调用”

import {extendTheme} from 'native-base'
import { useColorScheme } from 'react-native';

const colorScheme = useColorScheme()
const config = {
    
    useSystemColorMode: false,
    initialColorMode: colorScheme
}

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})

【问题讨论】：

什么是colorScheme？它是返回对象的方法，还是只是一个对象？你可以只做initialColorMode: colorScheme
如果是方法则不指定：reactnative.dev/docs/usecolorscheme
指定，它返回一个“配色方案”，即light, dark, null，reactnative.dev/docs/usecolorscheme#supported-color-schemes

标签： reactjs react-native color-scheme

【解决方案1】：

你的钩子只能在组件内部使用，像这样；

const MyComponent = () => {

    const colorScheme = useColorScheme();

    const config = {
        useSystemColorMode: false,
        initialColorMode: colorScheme
    }

    return (
        <>...</>
    )    
}

【讨论】：

它一直给我这个错误：“错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。”
更新了代表整个组件的答案。你可能在你的组件之外调用你的钩子
我已经更新了我的代码以更好地解释我需要什么
您需要在组件内部执行此操作，否则您无法使用 useColorScheme 钩子。