javascript - TextInput 在文本 react native 后面放置一个自动 "highlight"

Question

我在 IOS 中发现了这种奇怪的行为(在模拟器和真实设备上，但我只有模拟器的屏幕截图)在输入到 TextInput 组件时，它会在您输入的文本后面添加一个奇怪的突出显示.我已经引用了这个(已关闭)问题:https://github.com/facebook/react-native/issues/7070

我已经搜索了文档 ( https://facebook.github.io/react-native/docs/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',
    },
});

下面是实际发生的屏幕截图(第一个屏幕截图是突出显示的，第二个屏幕截图只是带有占位符文本的输入以供引用):

所以问题是......我如何让那个奇怪的高亮显示在 ios 上消失？

Answer 1

Text未被选中，它只是您在样式中指定的背景颜色。

Just remove the background color from the style of the <TextInput />