[英]How to change the text color in TextInput?
How do I change the text input color inside the TextInput
element in react native elements I tried passing the color="red"
to the component but for some reason it doesn't work.如何在反应原生元素中更改
TextInput
元素内的文本输入颜色我尝试将color="red"
传递给组件,但由于某种原因它不起作用。
Here is the code I used:这是我使用的代码:
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;
You need to add inputStyle
to change the style of the input.您需要添加
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" />}
/>
this expression is not gonna work because it is not actual css这个表达式是行不通的,因为它不是实际的 css
const styles = StyleSheet.create({
Input: {
top: "2%",
width: "70%",
left: "15%",
justifyContent: "center",
alignItems: "center",
},});
According to react native elements docs you have to pass style object that contains custom css properties.You can achieve like this.根据反应原生元素文档,您必须传递包含自定义 css 属性的样式 object。您可以这样实现。
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>
);
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.