android - React Native Android App 中 TextInput 下的意外行

Question

我正在使用 React Native 构建一个应用程序，我在我的物理 Android 设备上的每个 TextInput 下方都得到了一条奇怪的意外行，如下图所示。此外，这些线条不会显示在 iOS 模拟器中。

Input 组件的代码:

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

根据 React docs删除边框:

<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.

您也可以尝试禁用autoCorrect 标签。它也可能有帮助:

<TextInput autoCorrect={false} />

学分:

1. underlineColorAndroid
2. autoCorrect