Границы в textInput в React-Native автозаполнения ввода - PullRequest
Новая
       95

Границы в textInput в React-Native автозаполнения ввода

0 голосов
/ 16 января 2020

Я пытаюсь удалить верхнюю, правую и левую границы моего textInput (так что, очевидно, мне бы хотелось иметь только нижнюю границу :)) с помощью пакета response-native-autocomplete-input

Я пробовал borderTop: 0 / и «прозрачный», но он не работает. У меня все еще есть границы сверху и по бокам. 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)"
},

Если я могу получить любую помощь, которая действительно хороша, спасибо за чтение и за любую помощь!

Ответы [ 2 ]

1 голос
/ 16 января 2020

Вам необходимо использовать свойство inputContainerStyle для применения стилей к вводу.

Вы также можете использовать containerStyle, чтобы задать стиль контейнера вокруг автозаполнения, чтобы вам также не нужно было оборачивать Autocomplete с тегом View. 

<Autocomplete
  inputContainerStyle={styles.inputContainer}
/>
0 голосов
/ 21 января 2020

Кажется, это невозможно с этим пакетом.

Я мог делать то, что хотел, с помощью «автозаполнения нативной базы». Таким образом, он не полностью отвечает на вопрос, но позволяет делать правильные вещи!

Может быть, это кому-нибудь поможет!

...