Javascript TextInput放置自动“输入”；突出显示“；在文本后面反应本机

我在IOS中发现了这种奇怪的行为（无论是在模拟器上还是在真实设备上，但我只有模拟器的屏幕截图），在输入TextInput组件时，它会在您输入的文本后面加上一个奇怪的突出显示。我引用了本期（自结束以来）：

我在文档（）中搜索了这个问题的答案，但似乎找不到任何答案。我以为我的

selectTextOnFocus

prop很接近，但我将其设置为false，没有任何改变（行为仍然存在）

我还尝试将textDecorationColor和textShadowColor设置为透明，但没有效果。我现在真的不知道该怎么办

以下是我输入的代码：

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <TextInput 
                autoCapitalize='none' 
                autoFocus={autoFocus}
                onChangeText={(inputValue) => this.setState({inputValue})}
                value={this.state.inputValue} 
                secureTextEntry={this.props.secureTextEntry} 
                onBlur={this.whenInputIsBlurred.bind(this)} 
                onFocus={this.whenInputIsFocused.bind(this)} 
                underlineColorAndroid="transparent" 
                keyboardType={this.props.type} 
                returnKeyType={this.props.returnKeyType} 
                placeholder={this.state.placeholder} 
                placeholderTextColor='rgba(255, 255, 255, 0.3)'
                multiline={multiline}
                selectTextOnFocus={false}
                onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                style={styles.inputStyles} />
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputStyles: {
        height: 40,
        borderRadius: 2,
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        width: '100%',
        textDecorationColor: 'transparent',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
});

从“React”导入React；
从“react native”导入{View，Text，TextInput，StyleSheet}；
导出类GeneralInput扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
占位符：this.props.placeholder，
输入值：“”，
输入：false，
};
}
whenInputIsFocused（）{
this.setState（{占位符：}）；
}
当计算机变得模糊时（）{
如果（this.state.inputValue==“”）{
this.setState（{占位符：this.props.placeholder}）；
}
}
focusNextField（nextField）{this.refs[nextField].focus（）；}
render（）{
const autoFocus=this.props.autoFocus=='true'；
const multiline=this.props.multiline=='true'；
返回(
{this.props.labelText}
this.setState（{inputValue}）}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputisblued.bind（this）}
onFocus={this.whenInputIsFocused.bind（this）}
underlineColorAndroid=“透明”
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
占位符={this.state.placeholder}
占位符textcolor='rgba（255，255，255，0.3）'
多行={multiline}
选择textonfocus={false}
onSubmitEditing={（）=>{this.focusNextField（this.props.ref）}
blurOnSubmit={（this.props.moveAlongType==='next'）？false:true}
style={styles.inputStyles}/>
);
}
}
const styles=StyleSheet.create({
外部容器：{
为内容辩护：“中心”，
alignItems:'flex start'，
宽度：“90%”，
marginBottom:20，
},
标签文本：{
fontFamily:‘魔方黑体’，
尺寸：14，
fontWeight:'粗体'，
颜色：“#fff”，
marginBottom:5，
},
输入样式：{
身高：40，
边界半径：2，
背景色：“rgba（255，255，255，0.3）；”，
阴影颜色：“rgba（0,0,0,0.15）”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0，
阴影半径：0，
宽度：“100%”，
textDecorationColor:'透明'，
尺寸：14，
颜色：“#fff”，
paddingLeft:15，
fontFamily:‘魔方黑体’，
},
});

下面是实际发生情况的屏幕截图（第一个屏幕截图带有突出显示，第二个屏幕截图只是带有占位符文本的输入，以供参考）：

---

因此，问题是……如何在ios上消除这种奇怪的突出显示？

因此，根据@Siraj的说法，这种奇怪行为发生的原因是因为我应用于

组件的背景色也应用于正在输入的文本。因此，我将

包装在

中，将

高度

、

宽度

、

背景色

、

阴影

、和

边界半径

道具应用到周围的

中，它达到了预期的效果！请参见下面的代码：

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <View style={styles.inputContainer}> // added View
                <TextInput 
                    autoCapitalize='none' 
                    autoFocus={autoFocus}
                    onChangeText={(inputValue) => this.setState({inputValue})}
                    value={this.state.inputValue} 
                    secureTextEntry={this.props.secureTextEntry} 
                    onBlur={this.whenInputIsBlurred.bind(this)} 
                    onFocus={this.whenInputIsFocused.bind(this)} 
                    underlineColorAndroid="transparent" 
                    keyboardType={this.props.type} 
                    returnKeyType={this.props.returnKeyType} 
                    placeholder={this.state.placeholder} 
                    placeholderTextColor='rgba(255, 255, 255, 0.3)'
                    multiline={multiline}
                    selectTextOnFocus={false}
                    onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                    blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                    style={styles.inputStyles} />
                </View> // Closing the added View
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputContainer: { // added styles
        height: 40,
        width: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        borderRadius: 2,
    },
    inputStyles: {
        height: '100%',
        width: '100%',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
});

从“React”导入React；
从“react native”导入{View，Text，TextInput，StyleSheet}；
导出类GeneralInput扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
占位符：this.props.placeholder，
输入值：“”，
输入：false，
};
}
whenInputIsFocused（）{
this.setState（{占位符：}）；
}
当计算机变得模糊时（）{
如果（this.state.inputValue==“”）{
this.setState（{占位符：this.props.placeholder}）；
}
}
focusNextField（nextField）{this.refs[nextField].focus（）；}
render（）{
const autoFocus=this.props.autoFocus=='true'；
const multiline=this.props.multiline=='true'；
返回(
{this.props.labelText}
//添加视图
this.setState（{inputValue}）}
value={this.state.inputValue}
secureTextEntry={this.props.secureTextEntry}
onBlur={this.whenInputisblued.bind（this）}
onFocus={this.whenInputIsFocused.bind（this）}
underlineColorAndroid=“透明”
keyboardType={this.props.type}
returnKeyType={this.props.returnKeyType}
占位符={this.state.placeholder}
占位符textcolor='rgba（255，255，255，0.3）'
多行={multiline}
选择textonfocus={false}
onSubmitEditing={（）=>{this.focusNextField（this.props.ref）}
blurOnSubmit={（this.props.moveAlongType==='next'）？false:true}
style={styles.inputStyles}/>
//关闭添加的视图
);
}
}
const styles=StyleSheet.create({
外部容器：{
为内容辩护：“中心”，
alignItems:'flex start'，
宽度：“90%”，
marginBottom：