0
165
Views¿Cómo aplicar la tabla HTML en React Native?
Lo que quiero es establecer el ancho de todas las celdas en una columna como la celda más ancha de la columna.
Por ejemplo, tengo una columna y hay celdas en esa columna. Las celdas tienen anchos por su contenido como; 30px, 40px, 30px, 50px, 25px . Y quiero que todas las columnas tengan un ancho de 50px .
No hay display: table en React Native. Solo hay flex y none . Las tablas HTML realizan este proceso automáticamente. Intenté establecer anchos después de invocar el evento onLayout. Pero este enfoque me parece lento. Estoy tratando de encontrar otra solución.
¿Cómo lograr esto en React Native?
1 answers
Answer question0
Por lo general, puede manejar esto usando FlatList . La propiedad numColumns establece el número de columnas. Luego, use width y maxWidth para el elemento en la función renderItem para establecer un ancho máximo de la celda de la tabla.
Aquí hay un ejemplo mínimo que simula el de su pregunta. El color de fondo de cada celda es verde y el color del contenido es rojo o amarillo. Por lo tanto, podemos ver como cada celda tiene el mismo ancho, mientras que el contenido tiene diferentes anchos.
const data = [ { id: 1, width: 30, color: "red" }, { id: 2, width: 40, color: "yellow" }, { id: 3, width: 30, color: "red" }, { id: 4, width: 50, color: "yellow" }, { id: 5, width: 35, color: "red" } ] export default function App() { return ( <View style={{margin: 40}}> <FlatList data={data} numColumns={3} keyExtractor={item => item.toString()} renderItem={({item}) => { return <View style={{ maxWidth: 50, width: 50, backgroundColor: "green"}}> <View style={{width: item.width, backgroundColor: item.color, heigh: 40}}> <Text>hello</Text> </View> </View> }} /> </View> ); }Lo anterior produce la siguiente salida.
