Réagissez la saisie de texte natif avec le mode Gauche et Droite

Question

J'essaye de construire un composant de recherche avec Textfield avec à la fois la vue de droite et la vue de gauche (Images aux deux extrémités). L'entrée de texte s'ajuste à la longueur du contenu, donc le composant ne couvre pas la largeur entière du parent. Comment étirer le composant de sorte que le composant entier occupe toute la largeur du parent.

<View style={{flexDirection:'row', height:40,alignSelf:'stretch',backgroundColor:'red'}}> 
        <Image source={require('./image_assets_rn/search_rn.png')} style={{alignSelf:'center',}}/> 
        <TextInput placeholder="Search Jet" style={{backgroundColor:'white',alignSelf:'stretch',}}/> 
        <Image source={require('./image_assets_rn/search_rn.png')} style={{alignSelf:'center',}}/> 
      </View> 

Voici la sortie. Je veux étirer le champ de texte le long de l'axe principal (largeur)

Answer 1

Il peut être réalisé en donnant la TextInputflex:1, il n'y a pas besoin d'utiliser étirement.

<View style={styles.container}> 
     <View style={{flexDirection:'row', width: 300, height:40,backgroundColor:'lightgray'}}> 
      <Image 
       source={require('./image_assets_rn/search_rn.png')} 
       style={{ height: 30, width: 20,margin: 5}} 
      /> 
      <TextInput 
       placeholder="Search Jet" 
       style={{backgroundColor:'white', flex:1}} 
      /> 
      <Image 
       source={require('./image_assets_rn/search_rn.png')} 
       style={{ height: 30, width: 20, margin:5}} 
      /> 
      </View> 
     </View> 

Vérifiez sur snack

Je vous recommande this tutorial d'avoir une idée sur la façon dont fonctionne ēno.

J'espère que ça aide!

Answer 2

Je viens d'ajouter une composante flexbox dans chaque composant qui a enveloppé dans le composant View. Je pense qu'il fera en sorte que chaque composant suive la largeur des parents.

<View style={{ flexDirection:'row', 
       height:40, 
       alignSelf:'stretch', 
       backgroundColor:'red' }}> 

    <Image source={ require('./image_assets_rn/search_rn.png')} 
      style={{ flex:1, alignSelf:'center' }}/> 

     <TextInput placeholder="Search Jet" 
       style={{ flex:1, backgroundColor:'white', 
         alignSelf:'stretch' }}/> 

    <Image source={ require('./image_assets_rn/search_rn.png')} 
       style={{ flex:1, alignSelf:'center' }}/> 

</View> 

Si vous voulez en savoir plus sur Flexbox peut-être vous pouvez lire sur le Official Web ReactNative.

J'espère que cela peut vous aider :))