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

可以实现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的工作原理。

希望它有所帮助！

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。

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

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

2 个答案: