1
votes

Réduisez la hauteur et le remplissage vertical pour un TextInput en papier natif réactif

J'ai le code suivant:

input: {
  flex: 1,
  height: 40,
  borderColor: 'gray',
  borderWidth: 1,
}

qui affiche l'écran suivant:

Mon objectif est

de réduire la hauteur du TextInput . Il semble également avoir un rembourrage vertical. Est-il possible de réduire cela également? J'essaie juste d'économiser de l'espace sur l'écran et, à mon avis, cela prend beaucoup de place.

MODIFIER 01

J'ai essayé ce qui suit style:

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';

export default class Header extends Component {

  state = {
    text: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} style={styles.input} />
        <Button mode="contained" style={styles.button}>Add Todo</Button>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#c1deff',
  },
  input: {
    flex: 1,
  },
  button: {
    flex: 0,
  },
});

mais n'a pas fonctionné, car j'ai obtenu le résultat suivant:

qui, comme vous pouvez le voir, n'a pas l'air bien (évident).

Merci!

javascript android react-native iphone expo

0 commentaires

3 Réponses :

1
votes

Vous pouvez définir sa hauteur si vous le souhaitez:

<TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1, justifyContent:"center"}}
     onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

Source: https://facebook.github.io/react-native/docs/textinput

Essayez également de rechercher dans Github un texte d'entrée personnalisé. Ils peuvent avoir ce dont vous avez besoin. Bonne chance!

3 commentaires

essayé sans succès. S'il vous plaît, vérifiez mon Edit 01

@davidesp modifié. Sry je n'ai pas accès à un ordinateur portable pour le moment et je suis sur mon téléphone :) Je ne peux tester aucun code pour le moment pour vous donner une réponse sûre

aucun problème @Amas, cette question est maintenant résolue. Merci!

6
votes

ajoutez height et justifyContent dans le style

input: {
    flex: 1,
    height: 40,
    justifyContent:"center"
}

1 commentaires

C'est une chose qui sauve des vies! rien ne fonctionne padding, margin, paddingHorizontal, paddingVertical Rien d'autre que ceci: / définir la hauteur pour vous sauver la vie aussi

0
votes

Comme vous pouvez le voir dans le code source, vous ne pouvez changer la taille d'entrée qu'en modifiant le prop de rendu

0 commentaires