`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

产品容器.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

应用程序.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',
    },
});

包.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>
      {Your other components}
   </NativeBaseProvider>
);