пытаюсь изменить цвет текста с помощью этой функции в react native

ProgramBox

пытаюсь изменить цвет текста с помощью этой функции в react native

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#react-native

Вопрос:

это весь документ, я пытаюсь изменить цвет текста «Text Here» с помощью функции JS, которую друг написал для web. я был бы очень рад, если бы цвет текста сканировался / пульсировал / переливался по радуге вместо случайного перемещения через выбранные цвета, которые у меня есть. на самом деле я просто пытаюсь научиться делать подобные вещи в react-native.

 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;

Ответ №1:

Сохраните стиль в состоянии, в 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

1. цвет меняется, но он не обновляется постоянно, как я надеялся (меняется один раз при запуске). я бы хотел, чтобы текст сканировался через цвета или даже градиент цветов радуги. я довольно новичок в программировании, это всего лишь небольшая дополнительная функция, которую я хотел бы иметь в этом приложении, которое я учусь создавать. на самом деле это не очень важно, и я думаю, что, возможно, я неправильно использую stackoverflow, пытаясь получить помощь в выполнении чего-либо вместо помощи в отладке. я бы не обиделся, если бы вы не вернулись, чтобы заставить его сканировать по цветам, как я надеюсь. твоя помощь стала мне намного ближе, Тай. я подниму голос, когда выясню, как

2. @Meowterspace для этого вам нужно setInterval посмотреть мою обновленную закуску snack.expo.io/@lekgwaraj/vengeful-chocolates

Ответ №2:

То, что у вас есть, близко к работе, но у вас есть ряд ошибок в вашем методе изменения цвета:

Она возвращает объект { "color": circle } , и в данном случае circle — это функция. Это должно быть {color: ColorValue }
Во всех ваших значениях цвета отсутствует ‘#’

Кроме того, вам не хватает нескольких ключевых понятий из React:

Использовать состояние. Обновление состояния запускает метод render() по умолчанию.
Используйте метод жизненного цикла для вызова метода изменения цвета.
Не возвращайте весь объект стиля css, только значение для свойства css color .

Смотрите этот пример, чтобы приблизиться к рабочему решению:https://jsfiddle.net/8x6af9u5 /