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

Question

如何在 React 原生元素中更改 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;

Answer 1

这个表达式不会起作用，因为它不是实际的 css

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

根据 react native elements 文档，您必须传递包含自定义的样式对象 css properties.You 可以像这样实现。

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>
);

}

Answer 2

您需要添加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" />}
/>

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

How to change the text color in TextInput?

javascript

reactjs

react-native

react-native-elements