使用左視圖和右視圖模式反應本地文本輸入

Question

我試圖用右視圖和左視圖（圖像兩端）的Textfield構建搜索組件。文本輸入將自身包裝爲內容的長度，因此組件不覆蓋整個父寬度。如何拉伸組件以使整個組件佔據父項的全部寬度。

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

以下是輸出。我想伸展沿主軸線（寬度）的文本框

Answer 1

它可以實現給予TextInputflex:1，沒有必要使用拉伸。

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

檢查它snack

我建議你this tutorial會對Flexbox將如何工作的把握。

希望它有幫助！

Answer 2

我只是在包裝在組件View中的每個組件中添加組件flexbox。我認爲它會使每個組件都遵循父寬度。

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

如果您想了解更多關於Flexbox也許你可以在閱讀Official Web ReactNative。

我希望這可以幫助你:)）