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

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

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

}

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

2 个答案: