我正在尝试使用半透明的文本输入在 native react 中制作登录屏幕。但是当我在输入中键入文本时出现了一种奇怪的行为:键入的文本看起来像是突出显示的(但不是)。正如您在此屏幕截图中看到的:
(好像上传到imgur失败，所以:https://image.ibb.co/hvBDQe/Image_1.jpg)
这是我的代码:
class LoginForm extends Component {
//#region Constructeurs
constructor(props) {
// Appel du constructeur de Component
super(props);
// Initialise les propriétés du composant
this.state = {
isLoading: false,
usernameInput: "",
passwordInput: "",
urlInput: "",
portInput: "443"
};
}
//#endregion
//#region Cycle de vie du Component
componentDidMount() {
}
render() {
return (
<View style={styles.mainContainer} pointerEvents={this.state.isLoading ? 'none' : 'auto'}>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='*Email*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.usernameInput}
onChangeText={text => this.setState({usernameInput: text})}/>
<TextInput style = {styles.input}
returnKeyType="go"
ref={(input)=> this.passwordInput = input}
onSubmitEditing={() => this.urlInput.focus()}
placeholder='*Mot de passe*'
returnKeyType="next"
placeholderTextColor={COLOR_GREY_300}
secureTextEntry
value={this.state.passwordInput}
onChangeText={text => this.setState({passwordInput: text})}/>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.portInput.focus()}
ref={(input)=> this.urlInput = input}
autoCorrect={false}
returnKeyType="next"
placeholder='*adresse url*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.urlInput}
onChangeText={text => this.setState({urlInput: text})}/>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={this._onSubmitLogin}
ref={(input)=> this.portInput = input}
autoCorrect={false}
keyboardType='number-pad'
returnKeyType="go"
placeholder='*port*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.portInput}
onChangeText={text => this.setState({portInput: text})} />
<TouchableOpacity style={styles.buttonContainer} onPress={this._onSubmitLogin}>
<Text style={styles.buttonText}>*LOGIN*</Text>
</TouchableOpacity>
<ActivityIndicator size="large" color={COLOR_SECONDARY} animating={this.state.isLoading} style={styles.activityIndicator} />
</View>
);
}
//#endregion
//#region Listener
_onSubmitLogin = () => {
// Affichage du loader
this.setState({
isLoading: true
});
// Récupération de l'API KEY
let authController = new OBAuthController();
authController.callPostCreateApiKey().then((apiKey) => {
console.log("apiKey = " + JSON.stringify(apiKey));
// Masquage du loader
this.setState({
isLoading: false
});
});
}
//#endregion
}
export default LoginForm;
//#region Définition de la StyleSheet
const styles = StyleSheet.create({
mainContainer: {
padding: 50
},
input:{
height: 40,
backgroundColor: 'rgba(225,225,225,0.3)',
marginBottom: 16,
padding: 10,
color: '#fff'
},
buttonContainer:{
backgroundColor: '#2980b6',
paddingVertical: 15
},
buttonText:{
color: 'white',
textAlign: 'center',
fontWeight: '700'
},
activityIndicator: {
position:'absolute',
alignSelf:'center'
}
})
//#endregion在@Hariks 评论之后，我最终将我的每个 TextInput 包装到一个 View 中:
<View style={styles.inputView}>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='*Email*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.usernameInput}
onChangeText={text => this.setState({usernameInput: text})}/>
</View>
<View style={styles.inputView}>
<TextInput style = {styles.input}
returnKeyType="go"
ref={(input)=> this.passwordInput = input}
onSubmitEditing={() => this.urlInput.focus()}
placeholder='*Mot de passe*'
returnKeyType="next"
placeholderTextColor={COLOR_GREY_300}
secureTextEntry
value={this.state.passwordInput}
onChangeText={text => this.setState({passwordInput: text})}/>
</View>
<View style={styles.inputView}>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={() => this.portInput.focus()}
ref={(input)=> this.urlInput = input}
autoCorrect={false}
returnKeyType="next"
placeholder='*adresse url*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.urlInput}
onChangeText={text => this.setState({urlInput: text})}/>
</View>
<View style={styles.inputView}>
<TextInput style = {styles.input}
autoCapitalize="none"
onSubmitEditing={this._onSubmitLogin}
ref={(input)=> this.portInput = input}
autoCorrect={false}
keyboardType='number-pad'
returnKeyType="go"
placeholder='*port*'
placeholderTextColor={COLOR_GREY_300}
value={this.state.portInput}
onChangeText={text => this.setState({portInput: text})} />
</View>关于ios - react native 中的TextInput显示具有颜色背景的文本值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51730122/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |