react native 如何更改文本输入的文本颜色？答案

【问题标题】：How to change the text color of text input in react native?react native 如何更改文本输入的文本颜色？
【发布时间】：2017-09-09 07:55:41
【问题描述】：

输入的占位符是绿色的，但我也想输入绿色文本（当我输入文本时，文本颜色显示为黑色，这在我的 UI 中不够可见）。我怎样才能让它也变成绿色？

【问题讨论】：

请提供一些代码来展示您到目前为止所做的尝试。查看how to ask 了解如何提出一个好问题。查看style prop 获取TextInput，了解如何自定义您的输入。
你的问题解决了吗？
你使用的是原生库吗？
以防万一有人试图更改占位符的颜色。要更改占位符的颜色，请添加名为 placeholderTextColor = "grey" 的道具。

标签： react-native react-native-android react-native-ios native-base

【解决方案1】：

在TextInput 样式中添加color: 'green'; 会改变颜色

<TextInput style={styles.textInput} />

const styles = StyleSheet.create({
 textInput: {
  color: 'green',
 },
});`

在native-base 中，您还需要注意主题see docs

【讨论】：

您是否更改了主题颜色？

【解决方案2】：

只需为您的输入创建一个样式并将颜色设置为绿色

const styles = StyleSheet.create({
    textInputStyle: {
    color: 'green',
    }
});

并将其分配给您的 textInput

<TextInput 
    style={styles.textInputStyle}
    placeholderTextColor='green'
    underlineColorAndroid='green' />

【讨论】：

【解决方案3】：

如果要更改 TextInput 颜色，请在样式中添加 color。

下面的示例将 TextInput 颜色设为蓝色：

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        style=
        {{
          height: 40, borderColor: 'gray', borderWidth: 1, color : "blue"
        }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

【讨论】：

【解决方案4】：

在尝试了许多不同的解决方案后，我实现了一个自定义 TextInput 组件，我在其中放置了一个 Text 组件，该组件将颜色更改为背景，并在其上放置了一个具有透明字体颜色的 TextInput。我希望这个问题可以尽快以更好的方式解决。

updateText(v) {
  const { onChange } = this.props;
  this.setState({ text: v});
  onChange(v);
}
render() {
  const { changeColor } = this.props;
  const { text } = this.state;
  return  <View style={{ position: 'relative', flex: 1 }}>
            <Text style={ [ { flex: 1, position: 'absolute', zIndex: 1 }, changeColor? { color: red } : null ]}>
              {text}
            </Text>
            <RTextInput
              onChangeText={v => this.updateText(v)}
              style={[{ flex: 1, color: 'transparent', zIndex: 100 }]}
              {...props}
            />
          </View>
}

【讨论】：