React-Native autocomplete-input 中 textInput 中的边框

Question

我正在尝试使用包 react-native-autocomplete-input

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

我明白了： 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)"
},

如果我能得到任何帮助，那真是太好了，感谢阅读和帮助！

Answer 1

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

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

<Autocomplete
  inputContainerStyle={styles.inputContainer}
/>

Answer 2

看来那个包是不可能的。

我可以用 'native base autocomplete' 做我想做的事。所以，它并没有完全回答问题，但它允许做正确的事！

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

Answer 3

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

    // other styles
    inputContainer: {
        borderWidth: 0,
    },

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

Answer 4

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

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

React-Native autocomplete-input 中 textInput 中的边框

Borders in textInput in React-Native autocomplete-input

styles

border

textinput

react-native

expo