TextInput 反应本机显示带有颜色背景的文本值

Question

我正在尝试使用半透明文本输入在本机反应中制作登录屏幕。但是当我在输入中键入文本时会出现一种奇怪的行为：键入的文本看起来像是突出显示的（但它不是）。正如您在此屏幕截图中所见：

(好像上传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'
    },

TextInput 反应本机显示带有颜色背景的文本值

TextInput in react native show text value with a color background

css

textinput

ios

react-native