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

Question

我正在尝试使用具有右视图和左视图（图像在两端）的文本字段构建一个搜索组件。文本输入将自身包裹到内容的长度，因此组件不会覆盖整个父级宽度。如何拉伸组件，使整个组件占据父组件的全部宽度。

 <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即可实现，无需使用stretch

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

希望对您有所帮助:))

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

React native Text Input with Left and Right View mode

react-native-android

react-native-ios