为什么 react-native-elements 表单在输入下方显示一条线？

Question

我正在尝试使用 react-native-elements 创建一个简单的注册表。

但它向我显示了我尚未创建的元素，每个 Input 下方都有一条蓝线。这条线从哪里来？

你能帮帮我吗？谢谢

我展示截图和表格代码

这是组件文件TextInput.js

import React from 'react'
import { TouchableOpacity, Image } from 'react-native'
import { Icon, Input } from 'react-native-elements'
 
export default function TextInput(props) {

  return (
    <Input
      style={{ alignItems: 'center' }}
      containerStyle={{ marginBottom: 20, borderBottomColor: Colors.LIGHTPRIMARYCOLOR, borderBottomWidth: 1 }}
      inputStyle={{
        fontSize: 18, paddingVertical: 10,
        paddingHorizontal: 8, marginTop: 12,
        color: Colors.PRIMARYCOLOR,
        fontFamily: "Poppins-Light",
      }}
      placeholderTextColor={Colors.LIGHTPRIMARYCOLOR}
      placeholder={props.placeholder}
      leftIconContainerStyle={{ marginLeft: 0 }}
      leftIcon={<Icon size={24} color={Colors.PRIMARYCOLOR}
        type={'font-awesome'} name={props.image} />}
      rightIcon={props.bolGone ?
        <TouchableOpacity activeOpacity={0.8} style={globalStyles.btnVisibility} onPress={props.onPress}>
          <Image style={globalStyles.btnImage} tintColor={Colors.PRIMARYCOLOR}
            source={(props.secureTextEntry) ? require('../resources/images/ojo1.png') : require('../resources/images/ojo2.png')} />
        </TouchableOpacity> :
        <Icon size={24} color={Colors.PRIMARYCOLOR}
          type={'font-awesome'} name={props.imageRight} />}
      errorStyle={{ color: Colors.RED }}
      errorMessage={(props.bolError) ? props.strError : ''}
      editable={props.editable}
      secureTextEntry={props.secureTextEntry}
      keyboardType={props.keyboardType}
      onChangeText={props.onChangeText}
      value={props.value} />
  )
}

这是LoginScreen.js屏幕文件

import React, { Component, useState } from 'react'
import {
  Text,
  View,
  TouchableOpacity,
  StatusBar,
  Image
} from 'react-native'

import TextInput from '../components/TextInput'
import globalStyles from '../styles/global'
import Colors from '../styles/Colors'

export default function LoginScreen() {

  const [hidePassword, setHidePassword] = useState(false)
  return (
    <View style={globalStyles.container}>
      <StatusBar backgroundColor={Colors.BLUE} translucent={true} />
      <View style={globalStyles.logo}>
        <Image
          source={require('../resources/images/brainWorks.png')}
          style={globalStyles.imageLogo}
        />
      </View>
      <TextInput 
      keyboardType='email-address' 
      placeholder='email' 
      image='user' 
      />

      <TextInput
        keyboardType={null}
        placeholder='contraseña'
        image='lock'
        bolGone={true}
        secureTextEntry={hidePassword}
        onPress={() => setHidePassword(!hidePassword)}
      />
      <View style={globalStyles.btnMain}>
        <TouchableOpacity>
          <Text style={globalStyles.btntxt}>Iniciar Sesion</Text>
        </TouchableOpacity>
      </View>

      <View style={globalStyles.btnTransparent}>
        <TouchableOpacity>
          <Text style={[globalStyles.btntxt, {color: Colors.BLUE}]}>Registrate</Text>
        </TouchableOpacity>
      </View>

      <View>
        <TouchableOpacity>
          <Text style={[globalStyles.txtTransparent, {textDecorationLine: 'underline'}]}>¿ Olvidaste La Contraseña ?</Text>
        </TouchableOpacity>
      </View>

    </View>
  )
}

Answer 1

尝试添加 borderBottomWidth:0 如下：

<Input inputContainerStyle={{borderBottomWidth:0}} />

更多详情Here

为什么 react-native-elements 表单在输入下方显示一条线？

Why does the react-native-elements form show me a line below the Input?

javascript

input

reactjs

react-native

react-native-elements