[英]React Native Text color not working
我在TouchableOpacity
有一个Text
组件,我想根据var改变颜色。
这是我的代码:
import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
var flag = false;
export default class MyTest extends Component {
changeColor() {
flag = true;
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
onPress={this.changeColor.bind(this)}
>
<Text style={[{ color: "blue" }, flag ? { color: "red" } : false]}>
One
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
backgroundColor: "#F5FCFF"
}
});
我试过使用this.state.textColor
但没有结果。 我也试过在样式变量中使用它,但是再次,不工作。
任何的想法?
flag
变量不在组件状态中,因此组件在更改时不会重新呈现。
将它放在组件状态中,然后使用setState
切换它,它将起作用。
class MyTest extends Component {
state = { flag: true };
changeColor = () => {
this.setState(previousState => {
return { flag: !previousState.flag };
});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
onPress={this.changeColor}
>
<Text style={{ color: this.state.flag ? "red" : "blue" }}>One</Text>
</TouchableOpacity>
</View>
);
}
}
试试这个例子,这可以帮助你解决问题。
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={[styles.setFontSize,styles.setColorRed]}> React Native Font example 1</Text>
<Text style={[styles.setFontSize,styles.setColorPink]}> React Native Font example 2</Text>
<Text style={[styles.setFontSize,styles.setColorPurple]}> React Native Font example 3</Text>
<Text style={[styles.setFontSize,styles.setColorBlue]}> React Native Font example 4</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
setFontSize: {
fontSize: 20,
fontWeight : 'bold'
},
setColorRed : {
color: '#f44336'
},
setColorPink :{
color: '#e91e63'
},
setColorPurple :{
color: '#9c27b0'
},
setColorBlue :{
color: '#2196f3'
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.