React Native Elements FormInput底部多余线条问题求助

看起来你遇到的是FormInput组件封装容器自带的底部边框和内部TextInput线条叠加的问题，我来帮你一步步解决：

核心原因分析 #

React Native Elements的FormInput其实是对原生TextInput的封装，它的外层容器默认带有borderBottom样式，而你设置的underlineColorAndroid='transparent'只处理了Android原生TextInput的下划线，容器的边框还在，所以会出现两条线条（一条是容器的浅边框，一条是TextInput的线，或者两者叠加）。移除FormValidationMessage后，两个输入框的间距变大，线条不再重叠，所以看起来更明显。

可行解决方案 #

1. 覆盖FormInput的容器样式，移除底部边框 #

给每个FormInput添加containerStyle属性，直接去掉容器的底部边框：

<FormInput
  inputStyle={styles.textInput}
  // 新增这一行，移除容器的底部边框
  containerStyle={{ borderBottomWidth: 0 }}
  placeholder='user@email.com'
  autoCapitalize='none'
  autoCorrect={false}
  underlineColorAndroid='transparent'
  placeholderTextColor='white'
  onChangeText={this.onEmailChange.bind(this)}
/>

<FormInput
  secureTextEntry={true}
  autoCapitalize='none'
  placeholder='password'
  autoCorrect={false}
  inputStyle={styles.textInput}
  // 同样给密码输入框添加
  containerStyle={{ borderBottomWidth: 0 }}
  underlineColorAndroid='transparent'
  placeholderTextColor = 'white'
  onChangeText={this.onPasswordChange.bind(this)}
/>

2. 确保内部TextInput也无多余边框 #

同时可以在textInput样式里明确添加borderBottomWidth: 0，防止iOS端TextInput的默认下划线：

textInput: {
  height: 50,
  fontSize: 20,
  borderRadius: 50,
  backgroundColor: 'rgba(255, 255, 255, 0.3)',
  color: 'white',
  width: '100%',
  paddingLeft: 20,
  marginTop: 10,
  marginBottom: 10,
  // 新增这一行
  borderBottomWidth: 0
}

3. 全局统一设置（可选） #

如果你的项目里有多个FormInput需要处理，可以在全局样式里覆盖FormInput的默认容器样式：

import { ThemeProvider, createTheme } from '@rneui/themed';

const theme = createTheme({
  components: {
    FormInput: {
      containerStyle: {
        borderBottomWidth: 0
      }
    }
  }
});

// 在App根组件里包裹
<ThemeProvider theme={theme}>
  {/* 你的应用内容 */}
</ThemeProvider>

验证效果 #

做完上面的修改后，两个输入框下方的多余线条应该就消失了。之前你尝试的borderWidth:0没生效，是因为你只设置了inputStyle，而线条来自FormInput的外层容器，必须通过containerStyle来修改。

内容的提问来源于stack exchange，提问作者Marcus Christiansen