`useTheme` 必须在 `NativeBaseConfigProvider` 中使用

Question

在我的项目中我遇到了上述错误谁能告诉我如何解决这个错误。

我遇到的错误是：

错误：useTheme必须在NativeBaseConfigProvider

中使用

此错误位于：

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

ProductContainer.js:

import React, { useState, useEffect } from 'react'
import { View, StyleSheet, ActivityIndicator, FlatList, Text} from 'react-native'
import { Container, Header, Icon, Item, Input } from 'native-base';
import ProductList from './ProductList';
import SearchedProduct from './SearchedProducts';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
    const [products, setProducts ] = useState([]);
    const [productsFiltered, setProductsFiltered] = useState([]);
    const [focus, setFocus] = useState();
    useEffect(() => {
        setProducts(data);
        setProductsFiltered(data);
        setFocus(false);
        return () => {
            setProducts([])
            setProductsFiltered([])
            setFocus()
        }
    }, [])    
    const SearchProduct = (text) => {
        setProductsFiltered(
            products.filter((i) => i.name.toLowerCase().includes(text.toLowerCase()))
        );
    }
    const openList = () => {
        setFocus(true);
    } 
    const onBlur = () => {
        setFocus(flase);
    }
    return (
        <Container>
            <View  style = {{ flexDirection: "row"}}>
                  <Input
                  width = "100%"
                  variant = "rounded"
                  placeholder="Search"
                  onFocus={openList}
                  onChangeText={(text) => SearchProduct(text)}
                  />                  
            </View>
            {focus == true ? (
                <SearchProduct 
                    productsFiltered={productsFiltered}
                />
            ) : (
                <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>        
    )
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
export default ProductContainer

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//Screens
import Header from './Shared/Header'
import ProductContainer from './Screens/Products/ProductContainer'

export default function App() {
    return (
        <View style={styles.container}>
          <Header />
          <ProductContainer />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

package.json:

{
    "name": "animal-feedmart",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
    },
    "dependencies": {
        "expo": "~44.0.0",
        "expo-status-bar": "~1.2.0",
        "native-base": "^3.3.7",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.3",
        "react-native-base": "^1.1.0",
        "react-native-safe-area-context": "^4.2.1",
        "react-native-svg": "^12.3.0",
        "react-native-web": "0.17.1"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9"
    },
    "private": true
}

谁能帮我解决这个问题？提前致谢

Answer 1

在您的 app.js 中导入 NativeBaseProvider 并将您的其他组件包裹在它周围

import { NativeBaseProvider } from 'native-base';

return (
<NativeBaseProvider>
  <View style={styles.container}>

    <Header />

    <ProductContainer />

  </View>
</NativeBaseProvider>
);

Answer 2

如果您输入本机提供程序并且它仍然显示错误，请确保更改您的 Header 因为本机基础从 v3 向上删除它，请改用 HStack，如果您想使用 Header 将原生基础版本降级到 v2.12.14

`useTheme` 必须在 `NativeBaseConfigProvider` 中使用

`useTheme` must be used within `NativeBaseConfigProvider`

node.js

npm