我正在使用 React 本機組件，根據(jù)其支持，它使用兩種主要顏色。因為我想在樣式表中訪問該變量，所以我在類之外聲明它，而不是在狀態(tài)中。首先，我將其聲明為藍(lán)色，然后在構(gòu)造函數(shù)中將其值更改為綠色。但是它使用的文本仍然是藍(lán)色的。我知道它與渲染有關(guān)，但我認(rèn)為因為我更改了生命周期中第一個類構(gòu)造函數(shù)中的值，所以它會起作用。我不想在 JSX 樣式標(biāo)簽中使用函數(shù)，那么有解決方案嗎？let mainColor = Colors.blue1;export default class Article extends Component { constructor(props) { super(props); mainColor = Colors.green; this.state={ liked: false, withHeroImage: false } } render() { return ( <Text style={styles.title}>Lorem ipsum</Text> ); }}const styles = StyleSheet.create({ title:{ fontSize: 20, color: mainColor, fontFamily: FontFamily.PoppinsSemibold, marginBottom: 20 }})
3 回答
鴻蒙傳說
TA貢獻(xiàn)1865條經(jīng)驗 獲得超7個贊
我不認(rèn)為您可以在創(chuàng)建后修改樣式表，并且不清楚您為什么要這樣做。
在您的示例中，您可以只向標(biāo)簽添加一個動態(tài)屬性Text，如下所示：
<Text style={[styles.title, {color:mainColor}]}>Lorem ipsum</Text>
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗 獲得超4個贊
let mainColor = Colors.blue1;
export default class Article extends Component {
constructor(props) {
super(props);
this.state={
liked: false,
withHeroImage: false,
mainColor = Colors.green;
}
}
render() {
return (
<Text style={[styles.title, color: this.state.mainColor]}>Lorem ipsum</Text>
);
}}
const styles = StyleSheet.create({
title:{
fontSize: 20,
fontFamily: FontFamily.PoppinsSemibold,
marginBottom: 20
}
})
試試這個方法。只是更新變量不會做任何改變。在渲染部分進(jìn)行更改應(yīng)該在 setState 或 props 中完成。所以如果你想更新顏色，那么在 setState 中獲取顏色并將其分配給樣式，就像上面所做的那樣。希望能幫助到你 ?。。?！
慕尼黑8549860
TA貢獻(xiàn)1818條經(jīng)驗 獲得超11個贊
如果你的React版本是16.8或更高，你可以使用效果hook。
用法
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
export default function Article() {
? const [maincol, setColor] = useState("blue");
? const styles = StyleSheet.create({
? ? title:{
? ? ? ? fontSize: 20,
? ? ? ? color: maincol,
? ? ? ? marginBottom: 20
? ? }
})
? useEffect(() => {
? ? console.log(maincol);
? });
? ? ? ? return (
? ? ? ? ? <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
? ? ? ? ? ?<Button title="change color" onPress={() => setColor("green")} />
? ? ? ? ? ?<Text style={styles.title}>Lorem ipsum</Text>
? ? ? ? ? ?</View>
? ? ? ? );
}
添加回答
舉報
0/150
提交
取消