ios - react native 中的TextInput显示具有颜色背景的文本值
<p><p>我正在尝试使用半透明的文本输入在 nativereact 中制作登录屏幕。但是当我在输入中键入文本时出现了一种奇怪的行为:键入的文本看起来像是突出显示的(但不是)。正如您在此屏幕截图中看到的:</p>
<p>(好像上传到imgur失败，所以:<a href="https://image.ibb.co/hvBDQe/Image_1.jpg" rel="noreferrer noopener nofollow">https://image.ibb.co/hvBDQe/Image_1.jpg</a>)</p>
<p>这是我的代码:</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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</code></pre>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>在@Hariks 评论之后，我最终将我的每个 TextInput 包装到一个 View 中:</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code><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></code></pre>
<p style="font-size: 20px;">关于ios -reactnative 中的TextInput显示具有颜色背景的文本值，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/51730122/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/51730122/
</a>
</p>
页:
[1]