React Native，选择时如何更改 TextInputField 的 BottomborderColor?

Question

我想创建一个登录屏幕，当用户选择它并开始键入颜色"#FFCC00"时，文本输入的底部边框的颜色会发生变化。有人可以帮助我解决这个问题并告诉我要添加到我的代码中的内容吗？当有人可以留下如何连接和设置完整身份验证系统的链接时，这也很好。那真是太好了，因为我发现没有什么可以:(

import React from 'react';
import {
StyleSheet,
Text,
View,
StatusBar,
TouchableOpacity,
TextInput,
selectionColor,
} from 'react-native';
class SignUpScreen extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#2D6097',
title: 'Sign In',
};
};
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Text style={styles.login}>Regsitrieren</Text>
<TextInput
style={styles.input}
placeholder="E-Mail"
onChangeText={this.handleEmail}
/>
<TextInput
style={styles.input}
placeholder="Username"
onChangeText={this.username}
/>
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
onChangeText={this.password}
/>
<View style={styles.btnContainer}>
<TouchableOpacity
style={styles.userBtn}
onPress={() => this.props.navigation.navigate('SignUp2')}>
<Text style={styles.btnText}>SignUp</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#fff',
},
header: {
width: '100%',
height: 50,
flex: 1,
backgroundColor: '#fff',
},
login: {
fontSize: 40,
marginTop: 30,
marginBottom: 50,
color: '#555',
borderBottomColor: '#2D6097',
borderBottomWidth: 3,
},
input: {
width: '80%',
backgroundColor: '#fff',
padding: 15,
marginBottom: 50,
borderBottomColor: '#2D6097',
borderBottomWidth: 2,
fontSize: 25,
},
btnContainer: {
justifyContent: 'space-between',
width: '100%',
alignItems: 'center',
marginTop: 30,
},
userBtn: {
backgroundColor: '#2D6097',
padding: 10,
margin: 20,
marginBottom: 50,
borderRadius: 5,
width: '80%',
},
btnText: {
fontSize: 30,
textAlign: 'center',
color: '#fff',
},
});
export default SignUpScreen;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

TextInput 中的onFocus在 TextInput 聚焦并据此有条件地呈现您的样式时调用。此外，请确保在使用onBlur对isFocusEmail文本输入未聚焦时更改值。

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
export default class SignUpScreen extends Component {
state = {
isFocusEmail: false
};
handleInFocus = () => this.setState({ isFocusEmail: true });
handleOutFocus = () => this.setState({ isFocusEmail: false });
render() {
return (
<View style={styles.container}>
<Text style={styles.login}>Regsitrieren</Text>
<TextInput
onFocus={this.handleInFocus}
onBlur={this.handleOutFocus}
style={
this.state.isFocusEmail
? [styles.input, { borderBottomColor: "#FFCC00" }]
: styles.input
}
placeholder="E-Mail"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#fff"
},
login: {
fontSize: 40,
marginTop: 30,
marginBottom: 50,
color: "#555",
borderBottomColor: "#2D6097",
borderBottomWidth: 3
},
input: {
width: "80%",
backgroundColor: "#fff",
padding: 15,
marginBottom: 50,
borderBottomColor: "#2D6097",
borderBottomWidth: 2,
fontSize: 25
}
});

希望这对你有帮助。随意怀疑。