React Native Android App中TextInput下的意外行

Question

I am building an app using React Native and I get a weird unexpected line below every TextInput on my physical android device as shown below in the picture. Also, the lines don't show up in the iOS simulator.

My code for the Input Component:

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

const Input = ({ value,  onChangeText, placeholder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <TextInput
        secureTextEntry={secureTextEntry}
        placeholder={placeholder}
        autoCorrect={false}
        style={inputStyle}
        value={value}
        onChangeText={onChangeText}
      />
    </View>
  );
};

const styles = {
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 14,
    lineHeight: 23,
    flex: 2,
  },
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: '#ddd'
  }
};

export { Input };

Answer 1

According to React docs to remove the border:

<TextInput underlineColorAndroid='transparent' />

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.

Also you can try to disable autoCorrect tag. It might help too:

<TextInput autoCorrect={false} />

Credits:

1. underlineColorAndroid
2. autoCorrect

Answer 2

输入底部的边框是Android的自然行为，对于iOS没有边框底部。