android - 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 传递 Prop :

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 截图

安卓系统截图

Answer 1

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="透明" 和 填充:0