¿Cómo cambiar el estilo en React Native?
Necesito cambiar el color del texto cuando es verdadero o falso aquí está mi código:
Área de estilos
LIVE:{ color: "red" }, Comp: { color: "green" },Principal
<Text style={MyCardStyle.AnyText}>{isLive == false ? /* MyCardStyle.Comp */ : /* MyCardStyle.LIVE */ }</Text> // The commented out codes have error as "Objects are not valid as a React child"Accesorios
<MyMatchCard isLive={true} /> Aquí quiero cambiar el color del texto a verde cuando es false o rojo cuando es true . ¿Cómo aplicar realmente el color sin obtener un error?
Una forma de hacerlo es cambiar el objeto de estilo para que funcione. Esa función tomará un parámetro que se usará para definir el color del texto:
import { Text, View, StyleSheet } from 'react-native'; import Constants from 'expo-constants' // or any pure javascript modules available in npm import { Card } from 'react-native-paper'; const MyText = ({isLive}) => { return ( <Text style={styles.text(isLive)}> Change code in the editor and watch it change on your phone! Save to get a shareable url. </Text> ) } export default function App() { return ( <View style={styles.container}> <MyText isLive /> <MyText /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, text: (isLive) => ({ margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: isLive ? 'green' : 'black' }), });También puede pasar la condición a la propiedad de estilo.
const MyText = ({isLive}) => { return ( <Text style={{color: isLive? 'green' : 'red' }}> Your text </Text> ) }