错误：`useTheme` 必须在 `NativeBaseConfigProvider` 中使用答案

【问题标题】：Error: `useTheme` must be used within `NativeBaseConfigProvider`错误：`useTheme` 必须在 `NativeBaseConfigProvider` 中使用
【发布时间】：2022-12-03 21:00:29
【问题描述】：

在我的项目中，我遇到了上述错误

错误解释：

此错误位于：

in Container

in ProductContainer (created by App)

in RCTView (created by View)

in View (created by App)

in App (created by ExpoRoot)

in ExpoRoot

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

产品容器.js：

从'反应'导入反应，{useState，useEffect}

从 'react-native' 导入 { View, StyleSheet, ActivityIndicator, FlatList, Text}

import { Container, Header, Icon, Item, Input, Text } from 'native-base';

从“./ProductList”导入 ProductList；

const data = require('../../assets/data/products.json');

const ProductContainer = () => {

const [products, setProducts ] = useState([]);

useEffect(() => {

    setProducts(data);

    return () => {

        setProducts([])

    }

}, [])

const styles = StyleSheet.create({

    container: {

      flex: 1,

      backgroundColor: '#fff',

      alignItems: 'center',

      justifyContent: 'center',

    }

})

return (

    <Container>

        <Header searchBar rounded>

        </Header>

        <View style={styles.container}>

            <Text>Product Container</Text>

            <View style={styles.listContainer}>

            <FlatList 

                data={products}

                numColumns={2}

                renderItem={({item}) => <ProductList 

                key={item.brand}

                item={item}/>}

                keyExtractor={item => item.brand}

            />

        </View>

    </View> 

    </Container>
    
)

}

导出默认 ProductContainer；

【问题讨论】：

我在运行 Jest 测试时遇到了同样的错误。你设法解决了吗？

标签： node.js npm

【解决方案1】：

我设法从这个 github 问题中解决了这个错误：https://github.com/GeekyAnts/NativeBase/issues/4303。

显然问题在于您需要将应用程序元素包装在<NativeBaseProvider> 中。

在此示例中，您可以看到本机基础提供程序如何包装所有其他提供程序，如果 <NativeBaseProvider> 不在顶部，它将抛出错误：useTheme must be used within `NativeBaseConfigProvider

export default function App() {
    return (
      <NativeBaseProvider>
        <SafeAreaProvider>
          <AuthProvider>
            <Navigation colorScheme={colorScheme} />
            <StatusBar />
          </AuthProvider>
        </SafeAreaProvider>
      </NativeBaseProvider>
    );
}

【讨论】：

【解决方案2】：

<Container>
    <Header searchBar rounded>
    </Header>
    <View style={styles.container}>
        <Text>Product Container</Text>
        <View style={styles.listContainer}>
        <FlatList 
            data={products}
            numColumns={2}
            renderItem={({item}) => <ProductList 
            key={item.brand}
            item={item}/>}
            keyExtractor={item => item.brand}
        />
    </View>
</View> 
</Container>

将所有这些 Container 标签及其内容包装在里面......

【讨论】：

【解决方案3】：

如果问题发生在测试中，您只需在测试中将 initialWindowMetrics 传递给 NativeBaseProvider。

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

<NativeBaseProvider initialWindowMetrics={inset}>
  {children}
</NativeBaseProvider>;

【讨论】：