如何在 react native flatlist 中使用 justifyContent 和 alignItems 与 contentContainerStyle 等。

Question

我使用的是 react native。现在，当我试图用justifyContent和alignItems来将列表居中时，它给我一个奇怪的动作。另外，用justifyContent和alignItems作为居中的contentContainerStyle也给出了一个奇怪的动作。今天一整天都在寻找解决方案。我将在下面提供代码和图片。谢谢你。

im试图将这个flatlist居中对齐，就像justfyContent和alignItems会做的那样。你可以看到，内容向屏幕左边倾斜。

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import SearchBarComponent from "../components/SearchBar";
import PokeBanner from "../components/PokeBanner";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.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,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    }

    render() {

        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <SearchBarComponent style={GlobalStyles.searchBar}/>
                <PokeBanner/>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <View style={GlobalStyles.pokeFlatList}>
                <FlatList
                    contentContainerStyle={{flexDirection: "row",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>
                    }/>
                </View>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}


export default Home;

当我尝试使用下面的代码添加contentContainerStyle时，就会发生这样的情况。

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";
import SearchBarComponent from "../components/SearchBar";
import PokeBanner from "../components/PokeBanner";

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.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,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    }

    render() {

        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <SearchBarComponent style={GlobalStyles.searchBar}/>
                <PokeBanner/>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <View style={GlobalStyles.pokeFlatList}>
                <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>
                    }/>
                </View>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}


export default Home;

Answer 1

你唯一要做的就是改变一下 renderItem 的FlatList从。

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

到

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

还你 contentContainerStyle 的FlatList。

更多信息请看下面的工作示例 (去掉一些代码，做一个最低限度的工作范例)

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

希望对你有所帮助。如有疑问，欢迎咨询。

Answer 2

你可以使用FlatList columnWrapperStyle并从你的View中移除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>
                    }/>

改为

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

希望对大家有所帮助!