尝试用此函数更改本机的文本颜色
尝试用此函数更改本机的文本颜色
提问于 2019-03-21 20:16:31
这是整个文档，我试图用一个朋友为web编写的JS函数来更改“这里的文本”文本颜色。我会非常高兴，如果文本的颜色扫描/脉冲/飘动在彩虹中，而不是通过随机的运动，通过选择的颜色，我有。我真的只是想学习如何做这种反应-本土化的事情。
class MainFeed extends Component {
render() {
return (
<View style={{ flex: 1, width: 100 + "%", height: 100 + "%" }}>
<View style={styles.tempNav}>
<Text style={circle(backgroundColor="white")}>Text Here</Text>
</View>
<PostFeed />
</View>
);
}
}
const styles = StyleSheet.create({
tempNav: {
width: 100 + "%",
height: 56,
marginTop: 20,
backgroundColor: "rgb(250,250,250)",
borderBottomColor: "rgb(102,102,102)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
});
var circle = function setTextColor() {
myVar = setTimeout(setTextColor, 500);
var index = Math.round(Math.random() * 9);
var ColorValue = "FFFFFF"; // default color - white (index = 0)
if (index == 1) ColorValue = "FFCCCC"; //peach
if (index == 2) ColorValue = "CCAFFF"; //violet
if (index == 3) ColorValue = "A6BEFF"; //lt blue
if (index == 4) ColorValue = "99FFFF"; //cyan
if (index == 5) ColorValue = "D5CCBB"; //tan
if (index == 6) ColorValue = "99FF99"; //lt green
if (index == 7) ColorValue = "FFFF99"; //lt yellow
if (index == 8) ColorValue = "FFCC99"; //lt orange
if (index == 9) ColorValue = "CCCCCC"; //lt grey
// document.querySelector(".circle").style.color =
// "#" + ColorValue;
return {
color: circle,
}
}
export default MainFeed;回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-21 20:57:08
将样式保存在状态中，在setTimeout中将颜色设置为函数返回的颜色。你的代码需要清理一下。
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
class MainFeed extends React.Component {
state = {
textStyle: {
color: 'green',
}
}
setTextColor = () => {
var index = Math.round(Math.random() * 9);
var ColorValue = "#FFFFFF"; // default color - white (index = 0)
if (index == 1) ColorValue = "#FFCCCC"; //peach
if (index == 2) ColorValue = "#CCAFFF"; //violet
if (index == 3) ColorValue = "#A6BEFF"; //lt blue
if (index == 4) ColorValue = "#99FFFF"; //cyan
if (index == 5) ColorValue = "#D5CCBB"; //tan
if (index == 6) ColorValue = "#99FF99"; //lt green
if (index == 7) ColorValue = "#FFFF99"; //lt yellow
if (index == 8) ColorValue = "#FFCC99"; //lt orange
if (index == 9) ColorValue = "#CCCCCC"; //lt grey
// document.querySelector(".circle").style.color =
// "#" + ColorValue;
return {
color: ColorValue,
}
}
componentDidMount = () => {
setTimeout(() => {
this.setState({
textStyle: this.setTextColor()
})
}, 1000);
}
render() {
return (
<View style={{ flex: 1, width: 100 + "%", height: 100 + "%" }}>
<View style={styles.tempNav}>
<Text style={this.state.textStyle}>Text Here</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
tempNav: {
width: 100 + "%",
height: 56,
marginTop: 20,
backgroundColor: "rgb(250,250,250)",
borderBottomColor: "rgb(102,102,102)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
});
export default MainFeed;Stack Overflow用户
发布于 2019-03-21 20:46:00
您所拥有的几乎可以工作，但是在您的变色方法中有一些bug：
- 它返回一个对象
{ "color": circle }，在本例中，循环是一个函数。那应该是{color: ColorValue } - 您的颜色值都缺少“#”
此外，您在React中缺少了一些关键概念：
- 使用状态。默认情况下，更新状态会触发render()方法。
- 使用生命周期方法调用更改颜色方法。
- 不要返回整个css样式对象，只返回css
color属性的值。
请参阅下面的Fiddle示例，以使您更接近工作解决方案：https://jsfiddle.net/8x6af9u5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55288624
复制相关文章
相似问题
腾讯云开发者
