npm 错误:ウuseTheme Ж必须在ウNativeBaseConfigProvider Ж中使用,

5anewei6  于 2022-12-04  发布在  其他
关注(0)|答案(3)|浏览(319)

在我的项目中,我遇到了上述错误
错误说明:
此错误位于:

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:
从“react”导入React,{使用状态,使用效果}
从“react-native”导入{视图、样式表、活动指示器、平面列表、文本}
从“native-base”导入{容器、标题、图标、项、输入、文本};
从'./ProductList'导入产品列表;
如果您的数据库中有一个数据库,那么您就可以使用该数据库。
常量产品容器=()=〉{

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

}
导出默认产品容器;

mwngjboj

mwngjboj1#

我设法从这个github问题解决了这个错误:https://github.com/GeekyAnts/NativeBase/issues/4303
显然,问题是您需要将应用程序元素 Package 在<NativeBaseProvider>中。
在此示例中,您可以看到本机基提供程序如何 Package 所有其他提供程序,如果<NativeBaseProvider>不在顶部,则将抛出错误:useTheme must be used withinNativeBaseConfigProvider`

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

hsvhsicv2#

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

将所有这些容器标签及其内容 Package 在...

kx7yvsdv

kx7yvsdv3#

如果问题发生在测试中,您只需在测试中将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>;

相关问题