Probé el siguiente código en React Native en mi navegador (usando Expo CLI Webpack) y el resultado son tres cuadrados verdes en el lado izquierdo de la pantalla.
import React, { useState } from "react"; import { View, TouchableOpacity, Text, StyleSheet } from "react-native"; const styles = { width: 100, height: 100, backgroundColor: "green" }; const Rectangle = (label, value) => { return ( <View style={[styles, {[label]: value}]}/> // Line I expect to modify style.backgroundColor ); }; const Page = () => { return ( <View style={{flex: 1, justifyContent: "space-evenly"}}> <Rectangle label="backgroundColor" value="red" /> <Rectangle label="backgroundColor" value="green" /> <Rectangle label="backgroundColor" value="blue" /> </View> ); }; export default Page;Sin embargo, esperaba ver un cuadrado rojo, verde y azul. He intentado imitar un patrón usado varias veces en esta página de la documentación de RN pero no se comporta como esperaba. ¿Podría alguien explicar lo que he entendido mal aquí? Gracias.
Los accesorios se pasarán como un solo atributo de objeto, no como múltiples atributos.
Simplemente reemplace (label, value) con ({label, value}) .
Al colocar llaves alrededor de sus accesorios, está destruyendo el primer atributo, que en este caso son sus accesorios.
Hay dos problemas con su código.
Primero, como mencionó Ugur Eren, no estás desestructurando tus accesorios.
En segundo lugar, está colocando sus objetos de estilos en una matriz .
const Rectangle = ({label, value}) => { //<-- use destructuring. See Ugur Eren answer return ( <View style={{...styles, [label]: value}}/> //<-- use an object. Use spread syntax to stack values ); };Usar la sintaxis extendida le permite construir un nuevo objeto, apilando los valores que se pasan (o construir una nueva matriz, agregando los valores que se pasan).
Parece que esto ya es lo que está tratando de hacer, excepto que estaba usando una matriz (que no sobrescribirá/apilará valores) y le faltará el operador de sintaxis extendida ( ... ).
Parece que me equivoco en esto: la sintaxis de Array para el estilo es correcta. Se usa en la documentación oficial de React Native sobre estilo :
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>Curiosamente, no se menciona esto en la documentación de React sobre estilo, ni en la página de elementos DOM ni en las preguntas frecuentes sobre estilo , que solo mencionan el uso de objetos para pasar estilo.