如何更改 TextInput 中的文本颜色？答案

【问题标题】：How to change the text color in TextInput?如何更改 TextInput 中的文本颜色？
【发布时间】：2020-05-20 16:28:44
【问题描述】：

如何在 react native 元素中更改 TextInput 元素内的文本输入颜色我尝试将 color="red" 传递给组件，但由于某种原因它不起作用。

这是我使用的代码：

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vector-icons/MaterialIcons";
import colors from "../config/colors";

function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <View style={styles.Input}>
      <Input
        style={styles.TextInput}
        placeholder="Your email"
        value={email}
        onChangeText={setEmail}
        autoCapitalize="none"
        autoCorrect={false}
        leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
      />
      <Input

        secureTextEntry
        placeholder="Your password"
        value={password}
        onChangeText={setPassword}
        autoCapitalize="none"
        autoCorrect={false}
        leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  Input: {
    top: "2%",
    width: "70%",
    left: "15%",
    justifyContent: "center",
    alignItems: "center",
  },
});
export default LoginScreen;

【问题讨论】：

标签： javascript reactjs react-native react-native-elements

【解决方案1】：

你需要添加inputStyle来改变输入的样式。

<Input
    style={styles.TextInput}
    inputStyle={{color: 'red'}}    // Add this to your code
    placeholder="Your email"
    value={email}
    onChangeText={setEmail}
    autoCapitalize="none"
    autoCorrect={false}
    leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}
/>

【讨论】：

【解决方案2】：

这个表达式是行不通的，因为它不是真正的 css

const styles = StyleSheet.create({
  Input: {
   top: "2%",
  width: "70%",
  left: "15%",
  justifyContent: "center",
  alignItems: "center",
 },});

根据反应原生元素文档，您必须传递包含自定义 css 属性的样式对象。您可以这样实现。

function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const styles={ color:'red' };

  return (
   <View style={styles.Input}>
    <Input 
      placeholder="Comment" 
      leftIcon={{ type: 'font-awesome', name: 'comment' }} 
      style={styles} 
      onChangeText={value => this.setState({ comment: value })} 
    />
  </View>
);

}

【讨论】：