Javascript 如何在带有contentContainerStyle等的react原生平面列表中使用justifyContent和alignItems

我用的是react native。现在，当我试图将平面列表放在屏幕中央，或者专门给平面列表加上justifyContent和alignItems时，它给了我一个奇怪的动作。此外，以justifyContent和alignItems为中心的contentContainerStyle也给出了一个奇怪的动作。昨天一整天都在寻找解决方案。我将在下面提供代码和图片。多谢各位

我试着在中间对齐这个平面列表，就像justfyContent和alignItems一样。您可以看到内容向屏幕左侧倾斜

import React，{useState}来自“React”；
从“react native”导入{视图、文本、按钮、平面列表、ActivityIndicator、TouchableOpacity}；
从“./styles/GlobalStyles”导入{GlobalStyles}；
从“/PokeDetails”导入PokeDetails；
从“./components/SearchBar”导入SearchBarComponent；
从“./components/PokeBanner”导入PokeBanner；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：[]，
}
}
componentDidMount（）{
取回(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
.然后（（res）=>res.json（））
。然后（（响应）=>{
这是我的国家({
孤岛加载：false，
数据来源：response.results，
})
日志（“响应”，响应）
log（“RESPONSE.RESSSULTS”，RESPONSE.results）
})
}
render（）{
const showIndicator=this.state.isLoading==true

import React，{useState}来自“React”；
从“react native”导入{视图、文本、按钮、平面列表、ActivityIndicator、TouchableOpacity}；
从“./styles/GlobalStyles”导入{GlobalStyles}；
从“/PokeDetails”导入PokeDetails；
从“./components/SearchBar”导入SearchBarComponent；
从“./components/PokeBanner”导入PokeBanner；
类Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：[]，
}
}
componentDidMount（）{
取回(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
.然后（（res）=>res.json（））
。然后（（响应）=>{
这是我的国家({
孤岛加载：false，
数据来源：response.results，
})
日志（“响应”，响应）
log（“RESPONSE.RESSSULTS”，RESPONSE.results）
})
}
render（）{
const showIndicator=this.state.isLoading==true？：null；
返回(
{showIndicator}
item.name}
numColumns={3}
data={this.state.dataSource}
renderItem={（{item}）=>
this.props.navigation.navigate（'PokeDetails'，
{项目，图像URL:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`}}>
}/>
this.props.navigation.navigate（“About”）}title=“转到About”/
)
}
}
导出默认主页；
您唯一要做的就是更改平面列表的
renderItem
的样式

<View style={{flex: 1, flexDirection: "column", margin: 1}}>

希望这对你有帮助。请放心。为此，您可以使用FlatList columnWrapperStyle并从视图中删除flex:1

更改：

                    <FlatList
                    contentContainerStyle={{justifyContent:"center", alignItems:"center"}}
                    keyExtractor={(item, index) => item.name}
                    numColumns={3}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <View style={{flex: 1, flexDirection: "column", margin: 1}}>
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails', 
                    {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
                    </TouchableOpacity>
                    </View>
                    }/>

item.name}
numColumns={3}
data={this.state.dataSource}
renderItem={（{item}）=>
this.props.navigation.navigate（'PokeDetails'，
{项目，图像URL:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`}}>
}/>

到

item.name}
numColumns={3}
data={this.state.dataSource}
renderItem={（{item}）=>
this.props.navigation.navigate（'PokeDetails'，
{项目，图像URL:`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`}}>
}/>


希望这有帮助

<View style={{flex: 1, flexDirection: "column", margin: 1}}>

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', margin: 1 }}>

import React from "react";
import { View, FlatList, Image, Text } from "react-native";

export default class Home extends React.Component {
  state = {
    isLoading: true,
    dataSource: [],
  };

  componentDidMount() {
    fetch(`https://pokeapi.co/api/v2/pokemon/?limit=27`)
      .then((res) => res.json())
      .then((response) => {
        this.setState({
          isLoading: false,
          dataSource: response.results,
        });
      });
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={(item) => item.name}
          numColumns={3}
          renderItem={({ item }) => 
            <View style={{flex: 1, justifyContent: "center", alignItems: "center", margin: 1}}>
              <Image
                source={{uri: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`}}
                style={{ width: 75, height: 75 }}
              />
              <Text>{item.name}</Text>
            </View>
          }
        />
      </View>
    );
  }
}

                    <FlatList
                    contentContainerStyle={{justifyContent:"center", alignItems:"center"}}
                    keyExtractor={(item, index) => item.name}
                    numColumns={3}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <View style={{flex: 1, flexDirection: "column", margin: 1}}>
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails', 
                    {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
                    </TouchableOpacity>
                    </View>
                    }/>

                    <FlatList 
                    columnWrapperStyle={{  flex: 1,justifyContent: "space-around"}}
                    keyExtractor={(item, index) => item.name}
                    numColumns={3}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <View style={{ flexDirection: "column", margin: 1}}>
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('PokeDetails', 
                    {item ,imageUrl: `https://projectpokemon.org/images/normal-sprite/${item.name}.gif`})}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name}/>
                    </TouchableOpacity>
                    </View>
                    }/>