Question

这是整个文档，我正在尝试使用一个朋友为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;

Answer 1

您所拥有的几乎可以使用，但是您在换色方法中存在许多错误：

它返回一个对象{ "color": circle }，在这种情况下，circle是一个函数。那应该是{color: ColorValue }
您的颜色值都缺少'＃'

此外，您还缺少React的一些关键概念：

使用状态。默认情况下，更新状态会触发render（）方法。
使用生命周期方法调用更改颜色方法。
不返回整个css样式对象，仅返回css color属性的值。

请参阅此小提琴中的示例，以使您更接近可行的解决方案：https://jsfiddle.net/8x6af9u5/

Answer 2

将样式保存为状态，在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;

查看小吃https://snack.expo.io/@lekgwaraj/vengeful-chocolates

在本机反应中尝试使用此功能更改文本颜色

2 个答案: