React Native Android App中TextInput下的意外行

Question

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

输入组件的代码：

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默认情况下在其视图底部有一个边框。此边框的填充由系统提供的背景图像设置，无法更改。避免这种情况的解决方案是要么不明确设置高度，系统将负责在正确的位置显示边框，或者通过将underlineColorAndroid设置为透明来不显示边框。

您也可以尝试停用自动更正标记。它也可能有所帮助：

<TextInput autoCorrect={false} />

现金：

1. underlineColorAndroid
2. autoCorrect

Answer 2

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