Question

大家好我想动态更改输入的textcolor。例如，最初在CSS中放置颜色：'＃fff'，然后我想在需要时将文本颜色更改为'#ddd'。

Answer 1

您可以使用ternary operator检查您的情况。它具有以下格式： (test conditon) ? true statement: false statement

基于此，您可以使用以下内容设置<TextInput> color：

<TextInput
  style={[styles.input, (this.state.username ? styles.inputHighlight : null)]} //replace with your condition
/>

添加样式表样式：

var styles = StyleSheet.create({
  input: {
    //other styles
    color:'#fff'
  },
  inputHighlight: {
    color:'#ddd'
  }
});

Answer 2

我已经从expo创建了示例应用，以演示动态颜色变化。我使用了间隔，但您可以根据需要使用setColor函数。

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
    constructor() {
        super();
        this.state = { colors: '#ffffff' };
    }
    setColor = (value) => {
        this.setState({ colors: value })
    }
    componentDidMount() {
        let i = 0;
        let colorsArray = ['gray', 'red', 'green', 'blue', 'pink', 'yellow']
        this._interval = setInterval(() => {
            if (i <= 5) {
                this.setColor(colorsArray[i]);
                i++;
            }
        }, 5000);
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={{ color: this.state.colors }}>
                    Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
});

Answer 3

与 Khushboo Shah 的答案类似，这就是我调整Component颜色的方法。代码必须放在render()函数中，并且render()必须使用常规方法触发。

render() {

    var overrideStyle = {};
    if ( condition ) {
         overrideStyle = { color: '#ddd' };
    }
    return (
              <Text style={[ this.props.style, overrideStyle ]}>
                //...
              </Text>
    );

}

如何动态地改变TextInput的textColor？

3 个答案: