0
votes

Bordures dans textInput dans React-Native autocomplete-input

J'essaye de supprimer les bordures supérieure, droite et gauche de mon textInput (donc évidemment, j'aimerais avoir juste la bordure inférieure :)) avec le package react-native-autocomplete-input

I essayé borderTop: 0 / et 'transparent' mais ça ne marche pas j'ai toujours les bordures sur le dessus et les côtés. borderStyle n'a pas fonctionné non plus

J'obtiens ceci: https://zupimages.net/viewer.php?id=20/ 03 / ovck.bmp

mon code est le suivant:

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

avec ce style:

  <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>

react-native expo border textinput styles

0 commentaires

3 Réponses :

1
votes

Vous devez utiliser la propriété inputContainerStyle pour appliquer des styles à l'entrée.

Vous pouvez également utiliser containerStyle pour styliser le conteneur autour de la saisie semi-automatique afin de ne pas t besoin d'encapsuler la Autocomplete avec la balise View .

<Autocomplete
  inputContainerStyle={styles.inputContainer}
/>

3 commentaires

Merci de répondre. J'essaye ce que vous me conseillez mais si je le fais, j'ai ceci: zupimages.net/up /20/03/4dda.bmp

supprimez le padding: 5 de votre style, ou il peut s'agir de votre View enroulé autour de l'entrée, vous pouvez également essayer de jouer avec containerStyle

Très bien, merci, j'ai également supprimé borderStyle: 'dashed' mais toujours: zupimages. net / viewer.php? id = 20/03 / ovck.bmp

0
votes

Il semble que ce soit impossible avec ce paquet.

Je pourrais faire ce que je voulais faire avec la «saisie semi-automatique de base native». Donc, ça ne répond pas complètement à la question mais ça permet de faire ce qu'il faut!

Cela aidera peut-être quelqu'un!

0 commentaires

0
votes

Vous pouvez définir le style inputContainer borderWidth sur 0:

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

Cela devrait résoudre votre problème.

0 commentaires