引用错误：找不到变量：样式

Question

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

我的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',
},
});

我的ProductCotainer.js文件：

import React, { useState, useEffect } from 'react'
import { View, StyleSheet, ActivityIndicator, FlatList} from 'react-native'
import ProductList from './ProductList';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
const [products, setProducts ] = useState([]);
useEffect(() => {
setProducts(data);
return () => {
setProducts([])
}
}, [])
return (
<View style={styles.container}>
<Text>Product Container</Text>
<View style={styles.listContainer}>
<FlatList 
data={products}
numColumns={2}
renderItem={({item}) => <ProductList 
key={item.id}
item={item}/>}
keyExtractor={item => item.name}
/>
</View>
</View>
)
}
export default ProductContainer;

请帮助我解决这个问题

提前感谢

Answer 1

您没有在ProductCotainer.js文件中定义styles。为了使用样式，您有两个选项：

1. 在每个使用它的文件中定义它。在一个有很多常见样式的中型/大型应用程序的情况下，这可能很难维护
2. 定义在每个使用样式的文件中导入的样式文件。这将是一个很好的起点