react-native - itemseparatorcomponent - react native elements

Reaccionar lista plana nativa con columnas, ancho del último elemento

Question

Estoy usando una lista plana para mostrar una lista de elementos en dos columnas

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

El componente de la tarjeta es solo una vista con algunos estilos:

<View style={{ flex: 1, margin: 5, backgroundColor: ''#ddd'', height: 130}} ></View>

Está funcionando bien, pero si el número de elementos es impar, la última fila solo contiene un elemento y ese elemento se extiende a todo el ancho de la pantalla.

¿Cómo puedo configurar el artículo con el mismo ancho que los demás?

Answer 1

Esta es la forma más limpia de FlatList una FlatList con columnas y espaciadas uniformemente:

    <FlatList style={{margin:5}}
        numColumns={2}                  // set number of columns 
        columnWrapperStyle={style.row}  // space them out evenly

        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });

Answer 2

Hay algunas cosas que puedes probar aquí.

A) Establecer un ancho predefinido para la tarjeta (¿Quizás igual a la altura que ha configurado?). Luego, puede usar alignItems para colocar la tarjeta en el medio o a la izquierda, sin saber qué desea aquí.

B) Si hay un número par de cartas, puede agregar una Vista vacía al final para llenar este espacio. Este método me parece bastante torpe pero útil cuando intento dejar espacio para elementos futuros.

C) Simplemente use alignItems: ''space-between , me gusta usar esto para centrar elementos, pero tendría que definir el ancho, o usar algo como flex:0.5

Sugiero investigar más en flexbox para ayudarlo con esto, ya que es difícil decir el contexto de esta situación. Supongo que los métodos anteriores ayudarán, pero si no, aquí hay algunos enlaces para que los vea:

Primer enlace

Segundo enlace

Tercer enlace _{Enlace roto}

Espero que esto ayude. Si necesita más aclaraciones, solo pregunte

Answer 3

La razón es que su tarjeta tiene estilo flex: 1 , por lo que intentará expandir todo el espacio restante. Puede solucionarlo agregando maxWidth: ''50%'' al estilo de su tarjeta

<View style={{ flex: 1, margin: 5, backgroundColor: ''#ddd'', height: 130, maxWidth: ''50%''}} ></View>

Answer 4

Puede intentar obtener el ancho actual del dispositivo a través de Dimensiones, hacer algunos cálculos matemáticos en función del número de columnas que desea representar, menos los márgenes y establecerlo como minWidth y maxWidth.

Por ejemplo:

const {height, width} = Dimensions.get(''window'');
const itemWidth = (width - 15) / 2;

<View style={{ flex: 1, margin: 5, backgroundColor: ''#ddd'', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>

Answer 5

compruebe si el número de elementos es impar, si el número es impar, dé un estilo especial al último elemento. p.ej)

 {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:''48%''
}
v2:{
}

Answer 6

para su caso use flex: 1/2

por lo tanto: su artículo debe tener una flexión de 1 / (número de columnas) si tiene 3 columnas, su artículo debe tener una flexión: 1/3