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设置为透明来不显示边框.

您也可以尝试禁用autoCorrect标记.它也可能有所帮助:

<TextInput autoCorrect={false} />

积分:

1. underlineColorAndroid
2. 自动更正