0
207
VistasBotones de aplicaciones nativas de React
Me gustaría dividir los botones en 2 botones (izquierdo, derecho) para que cada botón pueda verse, probé flex pero no funciona.
Actualmente se ve de la siguiente manera.
Aplicación.js
import * as React from 'react'; import { View } from 'react-native'; import Buttons from './Buttons'; export default function App() { return ( <View style={styles.container}> <Buttons /> </View> ) } const styles = StyleSheet.create({ container: { marginTop: 30, flex : 1 }});Botones.js
export default function Buttons(){ let alpha = Array.from(Array(26)).map((e, i) => i + 65); let alphabet = alpha.map((x) => String.fromCharCode(x)); let buttonList = []; for(let i=0;i<alphabet.length;i++){ buttonList.push(<Button style={styles.box} key={i} title={alphabet[i]} />) } return buttonList; }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Le sugiero que use una FlatList con dos columnas. Luego configure flex: 1 para el contenedor de cada botón. Esto es mejor para el rendimiento y hace lo que quieres.
import React, {useState} from 'react'; import { Text, View, StyleSheet, Button, FlatList } from 'react-native'; export default function App() { const [data, setData] = useState(Array.from(Array(26)).map((e, i) => i + 65).map((x) => String.fromCharCode(x))) return ( <View style={styles.container}> <FlatList data={data} numColumns={2} keyExtractor={item => item} renderItem={({item}) => { return ( <View style={styles.box} ><Button key={item} title={item} /></View> ); }} /> </View> ) } const styles = StyleSheet.create({ container: { marginTop: 30, flex : 1 }, box: { flex: 1, }, });Lo anterior da lugar a lo siguiente.
Es posible que desee tener algo de espacio entre los botones. Podemos lograr esto simplemente agregando un margen.
box: { flex: 1, margin: 5 },Lo anterior da lugar a lo siguiente.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta