我无法将项目居中对齐

Question

我想将项目对齐页面中心。我在所有 css 样式上使用 justifyContent 但它不起作用。我想动态地对齐它们。我不想使用 marginTop:xxx。当我向应用程序添加一个或多个新类别时，我想对齐所有项目。我想将它们与alignItems、justifyContent等对齐

const CategoriesScreen = () => {
  const [categories, setCategories] = useState<ICategories>()
  const navigation:any = useNavigation();
  const [select, setSelected] = React.useState<boolean>(true);

  useEffect(() =>{
  fetchCategories();

  },[])

  const fetchCategories = async () =>{
    try {
      setCategories((prevState) => ({
        ...prevState,
        pending:false,
        errorMsg:""
      }));
      const categories = await fetch('https://fakestoreapi.com/products/categories');
      const categoriesJson = await categories.json();

      setCategories((prevState) =>({
        ...prevState,
        categories : categoriesJson,
        pending:false,
        errorMsg:""
   
      }));


    } catch (err) {
      console.log("Error :", err)
    }
  }

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

      <FlatList
        data={categories?.categories}
        renderItem={({item}) => 
        <Pressable 
        onPress={() => alert("deneme")}
        style={({ pressed }) => [
          { backgroundColor: pressed ? 'red' : 'transparent' },
          styles.categoriesStyle
          
      ]} 
          >
          <Text >{item}</Text>
        </Pressable>}
        keyExtractor={(item, index) => index.toString()} 
        />
  
    </View>
  )
}

export default CategoriesScreen;

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:"white",
    alignItems:"center",
    justifyContent:"center"
  },

  categoriesStyle:{
    flex:1,
    backgroundColor:"lightgray",
    margin:"5%",
    textAlign:"center",
    borderRadius:20,
    width: 300,
    padding:"10%",
    justifyContent:"center",
    alignItems:"center"
  }
}) 

我尝试了 justifyContent 和alignItems，但它们不起作用。

Answer 1

我不熟悉 React Native，所以我可能会错得很，但以防万一——你在其他地方设置了 display: flex 了吗？