使用左视图和右视图模式反应本地文本输入

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。

我希望这可以帮助你:)）