文本中的边框在 React-Native 自动完成输入中输入

Question

我正在尝试删除我的文本输入的上、右和左边框(所以很明显，我只想有底部边框:)(与包反应本机自动完成输入

我尝试了 borderTop ： 0/和"透明"，但它不起作用，我仍然在顶部和侧面有边框。 边框样式也不起作用

我明白这个： 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

这应该给你所需的输出:)：

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

Answer 3

似乎那个包是不可能的。

我可以用"本机基础自动完成"做我想做的事情。 因此，它不能完全回答问题，但它可以让您做正确的事情！

Answer 4

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

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