react native中的TextInput显示带有颜色背景的文本值

Question

我正试图用半透明的文本输入在react native中制作一个登录屏幕。但当我在输入中键入文本时，有一种奇怪的行为：键入的文本看起来像是高亮显示的(但事实并非如此(。正如你在这个屏幕截图上看到的：

(似乎无法上传到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

知道吗？非常感谢。

Answer 1

在@Hariks评论之后，我最终将我的每个TextInput包装到一个视图中：

<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>

样式：

inputView: {
height: 40,
backgroundColor: 'rgba(225,225,225,0.3)',
marginBottom: 16,
padding: 10,
},
input:{
color: '#fff'
},