underlineColorAndroid 在 android 中不工作

Question

react-native-cli: 2.0.1
react-native: 0.52.2

在我的 ios 设备表单中看起来不错，但在 android 设备中它在 TextInput 上显示底部边框，

 class Input extends Component {

        render(){
            return(
                <View style={styles.container}>
                    <Text style={styles.lableStyle}>{this.props.label}</Text>
                    <TextInput
                         secureTextEntry={this.props.secureTextEntry}
                         placeholder={this.props.placeHolder}
                         autoCorrect={false}
                         value={this.props.value}
                         onChangeText={this.props.onChangeText}
                         underlineColorAndroid={this.props.borderColor} // not working
                         style={styles.textInputStyle} />
                </View>
            );

        }
    }

从 LoginForm 传递道具：

render(){
        return(
            <Card>
                <CardSection>
                    <Input 
                        borderColor="transparent" //props for border
                        label="Email"
                        placeHolder="abc@example.com"
                        onChangeText={this.onEmailChanged.bind(this)}
                        value={this.props.email}
                    />
                </CardSection>

                <CardSection>
                    <Input 
                        borderColor="transparent" // props for border
                        secureTextEntry
                        label="Password"
                        placeHolder="password"
                        onChangeText={this.onPasswordChanged.bind(this)}
                        value={this.props.password}
                    />
                </CardSection>

                {this.errorRender()}

                <CardSection>
                    {this.spinerRender()}
                </CardSection>
            </Card>
        );
    }

mac

的屏幕截图

android

的屏幕截图

Answer 1

终于解决了。 underlineColorAndroid 属性对我不起作用。所以我在 android res.

中添加样式

打开这个路径： android/app/src/main/res/values/styles.xml

并在样式中添加以下行：

<item name="colorAccent">#FFFFFF</item>
<item name="colorControlNormal">#FFFFFF</item>

它适用于 android

Answer 2

在您的登录表单中将您的更改为这个

           <Input 
                    borderColor='transparent'// props for border
                    secureTextEntry
                    label="Password"
                    placeHolder="password"
                    onChangeText={this.onPasswordChanged.bind(this)}
                    value={this.props.password}
                />

Answer 3

TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

underlineColorAndroid="transparent" 和 padding:0

underlineColorAndroid 在 android 中不工作

underlineColorAndroid not working in android

android

textinput

react-native