Estoy tratando de mapear una serie de objetos en botones en React Native, como una calculadora, pero tengo problemas para hacerlo. No estoy seguro si estoy haciendo esto bien, ya que está rompiendo mi aplicación. Quiero que el diseño sea como esta imagen aquí ingrese la descripción de la imagen aquí
export default function App() { const Cards = [ { card: "A", count: -1 }, { card: "K", count: -1 }, { card: "Q", count: -1 }, { card: "J", count: -1 }, { card: 10, count: -1 }, { card: 9, count: 0 }, { card: 8, count: 0 }, { card: 7, count: 0 }, { card: 6, count: 1 }, { card: 5, count: 1 }, { card: 4, count: 1 }, { card: 3, count: 1 }, { card: 2, count: 1 }, ]; return ( <View style={styles.container}> <View style={styles.CardPad}> {Cards.map((btn) => <TouchableOpacity> {btn} </TouchableOpacity> )} </View> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); }Estoy seguro de que la función de mapeo en JS está destinada a mapear todos los botones que se distribuirán en una cuadrícula. Le hice el estilo, pero no estoy seguro de si debería incluirlo aquí o si está marcando una diferencia en la función en sí. ¿O estoy haciendo esto completamente mal?
Gracias
Decidí divertirme un poco y mostrarte cómo haría yo para hacer esto. Aquí hay una URL para un codeSandbox: https://codesandbox.io/s/react-native-mapping-object-vh9p5g?file=/src/App.js:143-946
Haría un componente para ser mapeado. Me tomé la libertad y agregué algunas funciones a TouchableOpacity para ayudarlo a mostrar cómo funciona en el ejemplo. Pero la idea básica es hacer esto en la función de mapeo:
<View style={styles.cards}> {cards.map((i) =>( <Card item={i} selectCard={() => setCurrnet(i)} /> ) )} </View>Luego, asignaría la tarjeta selectCard a onPress en la opacidad táctil en el botón:
export const Card = ({ item, selectCard }) => { return ( <TouchableOpacity onPress={selectCard}> <View > <Text>Card : {item.card}</Text> <Text>Count : {item.count}</Text> </View> </TouchableOpacity> ); };