NodeJS 必须在“NativeBaseConfigProvider”中使用“useTheme”

yvt65v4c  于 2023-03-17  发布在  Node.js
关注(0)|答案(5)|浏览(254)

在我的项目中我遇到了以上的错误有谁能告诉我如何解决这个错误。
我面对的错误是:

错误: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
}

请问有谁能帮我解决这个问题吗?先谢了

c0vxltue

c0vxltue1#

在app.js中导入NativeBaseProvider并将其他组件 Package 在其中

import { NativeBaseProvider } from 'native-base';

return (
   <NativeBaseProvider>
      {Your other components}
   </NativeBaseProvider>
);
hzbexzde

hzbexzde2#

如果您放入了本机提供程序,但它仍然显示错误,请确保更改标头,因为本机基础从v3以上版本删除了它,请改用HStack,如果您要使用标头,请将本机基础版本降级到v2.12.14

5t7ly7z5

5t7ly7z53#

我已经在App.js中解决了这个问题

import { NavigationContainer } from '@react-navigation/native';
import { NativeBaseProvider, extendTheme } from 'native-base';

创建主题

const newColorTheme = {
    brand: {
      900: '#5B8DF6',
      800: '#ffffff',
      700: '#cccccc',
    },
  };

const theme = extendTheme({
  colors: newColorTheme,
});

并用于

export default function App() {
  return (
    <NativeBaseProvider theme={theme}>
      <NavigationContainer>
        <Header />
        <Main/>
      </NavigationContainer>
    </NativeBaseProvider>
  );
}
bbmckpt7

bbmckpt74#

import { NativeBaseProvider } from 'native-base';

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

ct3nt3jp5#

这对我有用https://docs.nativebase.io/testing#page-title
MyTestfile-test.tsx

import 'react-native';
import React from 'react';
import { Test } from '../screens/Test';

import { render } from '@testing-library/react-native';
import { NativeBaseProvider } from 'native-base';

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

it('renders correctly', () => {
  const wrapper = render(
    <NativeBaseProvider initialWindowMetrics={inset}>
      <Test />
    </NativeBaseProvider>,
  );
  wrapper.findByText('Test');
});

Test.tsx

import { Text } from 'native-base';
import React from 'react';

export const Test = () => {
  return <Text testID='test'>Test</Text>;
};

相关问题