使用左视图和右视图模式反应本地文本输入
问题描述:
我试图用右视图和左视图(图像两端)的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>
以下是输出。我想伸展沿主轴线(宽度)的文本框
答
它可以实现给予TextInput
flex: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将如何工作的把握。
希望它有帮助!
答
我只是在包装在组件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。
我希望这可以帮助你:))
有趣!文本输入假设推开第二个图标 – Itzdsp