【发布时间】：2019-01-14 17:47:10
【问题描述】：
我正在尝试使用半透明文本输入来制作反应原生的登录屏幕。但是当我在输入中键入文本时出现了一种奇怪的行为：键入的文本看起来像是突出显示的（但不是）。正如您在此屏幕截图中看到的那样：
（好像上传到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有什么想法吗？谢谢！
【问题讨论】：
-
尝试去除styles.input的背景色
-
@Hariks 是的，当我删除此样式道具时，它可以工作。但我想让我的背景半透明......
-
将 textInput 包装在 View 中，并为 View 提供所需的背景颜色或为 textInput 提供固定宽度。
-
@Hariks 它就像一个魅力！谢谢！
标签： ios css react-native textinput