Estoy tratando de configurar una lista plana con elementos que tengan las siguientes propiedades.
flex: 1maxWidth establecidowidth no se puede forzar al 100% porque la intención es que la lista plana admita varias columnasminWidth no se puede configurar ya que evitará la reducción del contenido si es demasiado grande para caber con el número de columnas. FlatList es el componente de nivel superior de una pantalla, por lo que hará el encabezado colapsado en iOS. A la que
padding en FlatList en sí)Entonces lo que tengo es algo como
const data = Array.from({length: 5}, (v,k) => ({v,k})); function renderItem({item, index}) { return (<View style={{ flex:1, maxWidth: 100, borderWidth: 1, backgroundColor: 'red', // alignSelf: "center" (also shrinks) }}> <Text>{item.k}</Text> </View>) } return (<FlatList style={StyleSheet.absoluteFill} contentContainerStyle={{ padding: 16, // alignSelf: center (shrinks content) }} renderItem={renderItem} data={data} />) También me gustaría evitar onLayout para evitar demasiados renderizados.
Hay otro accesorio llamado columnWrapperStyle que hace lo que necesitaba.
<FlatList columnWrapperStyle={{ justifyContent: 'center', }} contentContainerStyle={{ paddingVertical: 16, }} initialNumToRender={2} renderItem={renderItem} data={data} numColumns={numColumns} //can be set to 3 to force shrinking ItemSeparatorComponent={() => <View style={{ height: 16 }} />} keyExtractor={(item) => item.k.toString()} /> );Tenga en cuenta que NativeBase no expone esto como un accesorio de utilidad.