React-Native 自动完成输入中的 textInput 中的边框

Posted 2023-04-18

【中文标题】React-Native 自动完成输入中的 textInput 中的边框

【英文标题】：Borders in textInput in React-Native autocomplete-input

【发布时间】：2020-05-03 14:12:49

【问题描述】：

我正在尝试使用 react-native-autocomplete-input 包删除我的 textInput 的顶部、右侧和左侧边框（很明显，我只想拥有底部边框:)）

我尝试了 borderTop : 0 / 和 'transparent' 但它不起作用我仍然在顶部和侧面有边框。 边框样式也不起作用

我明白了： https://zupimages.net/viewer.php?id=20/03/ovck.bmp

我的代码是这样的：

  <ScrollView style=styles.containerScroll>
      <Text style=styles.h1>i18n.t("tripsform.title")</Text>
      <Autocomplete
        containerStyle=styles.container
        inputContainerStyle=styles.inputContainer
        autoCapitalize="none"
        autoCorrect=false
        data=this.findAirports(query_arrival)
        defaultValue=this.findAirports(query_start)
        onChangeText=text => this.setState( query_start: text )
        placeholder="Enter Start airports"
        renderItem=( airport ) => (
          <TouchableOpacity
            onPress=() => this.setState( query_start: airport )
          >
            <Text style=styles.h2>airport-</Text>
          </TouchableOpacity>
        )
      />
      <Autocomplete
        containerStyle=styles.container
        inputContainerStyle=styles.inputContainer
        autoCapitalize="none"
        autoCorrect=false
        data=this.findAirports(query_arrival)
        defaultValue=this.findAirports(query_arrival)
        onChangeText=text => this.setState( query_arrival: text )
        placeholder="Enter Arrival airports"
        renderItem=( airport ) => (
          <TouchableOpacity
            onPress=() => this.setState( query_arrival: airport )
          >
            <Text style=styles.h2>airport-</Text>
          </TouchableOpacity>
        )
      />
      <Form ref=c => (this._form = c) type=Trip options=options />
      <Text>"\n"</Text>
      <Text>"\n"</Text>
      <Button
        containerStyle=[styles.mybtnContainer]
        style=styles.mybtn
        onPress=this.handleSubmit
      >
        i18n.t("tripsform.item.add").toUpperCase()
      </Button>
      <Button
        onPress=() => this.props.navigation.navigate("MyTrips")
        containerStyle=[styles.mybtnContainer]
        style=styles.mybtn
      >
        Return to my trips
      </Button>
      <Text>
        "\n"
        "\n"
      </Text>
    </ScrollView>

采用这种风格：

inputContainer: 
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
,

如果我能得到任何非常好的帮助，感谢您的阅读和任何帮助！

【参考方案1】：

您需要使用inputContainerStyle 属性将样式应用于输入。

您还可以使用containerStyle 围绕自动完成设置容器样式，这样您也不需要使用View 标记包装Autocomplete。

<Autocomplete
  inputContainerStyle=styles.inputContainer
/>

【讨论】：

感谢您的回答。我试试你的建议，但如果我这样做，我有这个：zupimages.net/up/20/03/4dda.bmp

从你的风格中删除padding: 5，或者它可能是你的View包裹在输入中，你也可以尝试弄乱containerStyle

好的，谢谢我也删除了borderStyle：'dashed'但仍然：zupimages.net/viewer.php?id=20/03/ovck.bmp

【参考方案2】：

似乎用那个包是不可能的。

我可以用 'native base autocomplete' 做我想做的事。 因此，它并不能完全回答问题，但它允许做正确的事情！

也许这会对某人有所帮助！

【参考方案3】：

您可以将inputContainer样式borderWidth设置为0：

    // other styles
    inputContainer: 
        borderWidth: 0,
    ,

这应该可以解决您的问题。

【参考方案4】：

这应该会给你想要的输出:)：

<Autocomplete
   inputContainerStyle=width:"100%",borderBottomWidth:1
   inputStyle=borderWidth:0
   data=Options
   handleSelectItem=(item,id)=>optionHandler(item.value,id)
   valueExtractor=item => item.value
  />