如何在TextInput中更改文本颜色？
如何在TextInput中更改文本颜色？
提问于 2020-05-20 08:28:44
如何更改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;回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-20 08:41:33
您需要添加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" />}
/>Stack Overflow用户
发布于 2020-05-20 08:38:47
这个表达式不会工作，因为它不是实际的css。
const styles = StyleSheet.create({
Input: {
top: "2%",
width: "70%",
left: "15%",
justifyContent: "center",
alignItems: "center",
},});根据本机元素文档的反应，您必须传递包含自定义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>
);}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61918125
复制
![[踩坑]iconfont Symbol svg引入无法更改颜色](https://ask.qcloudimg.com/http-save/8227338/8085d6cd0702f73780b43af4ab986037.webp)
相似问题
如何在TextInput中更改边框颜色
全局“文本”颜色和"TextInput“文本颜色
React Native:无法更改<TextInput>组件中的文本颜色
更改React原生纸张中TextInput的文本颜色
Android TextInput提示文本颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
