连续3个项目时如何定位左右项目？答案

【问题标题】：How to position left and right items when 3 items in a row?连续3个项目时如何定位左右项目？
【发布时间】：2022-10-15 11:19:24
【问题描述】：

在 React Native 0.70 应用程序中，第二个 Header（react-native-element 3.4.2 添加到第一个 Header 下的视图中，其 centerComponent 指向搜索栏（仅一行）。这是代码：

import {  Header } from 'react-native-elements';
import { Col, Row, Grid } from 'react-native-easy-grid';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

Bar = () => {. //<<==search element
        return (
        <View style={{position:"absolute", bottom:-hp("2.2%"), alignContent:"flex-start", paddingTop:hp("2.5%"),flexDirection:"row", wifth:"100%"}}>
            <View style={{flex:1, alignItems:"center"}}>
                <TouchableOpacity  onPress={()=>{submit()}} >
                    <Icon  name="search-outline" color="black" size={hp("4.4%")}/> 
                </TouchableOpacity>
            </View>
            <View style={{flex:8}}>
                <TextInput  placeholder={"plcholder"} onChangeText={strChg}></TextInput>
            </View>
            <View style={{flex:1, alignItems:"center"}}>
                <TouchableOpacity  onPress={()=>{navigation.navigate("MyHelp")}} >
                    <Icon  name="help-outline" color="black" size={hp("4.4%")}/> 
                </TouchableOpacity>  
            </View>             
        </View>
    )
    }

return (
   
        <View style={styles.container}>
            <Header   //<<== first header to show screen name
            containerStyle={{backgroundColor: '#f4511e'}}
            centerComponent={<HeaderCenter />}. //<<==show screen name
            />
            <Header //<<==2nd header to show search bar
            containerStyle={{backgroundColor: 'white'}} //<<==white background color
            centerComponent={<Bar/>} //<<==here goes the search bar
            />
            <ScrollView>
                ....
            </ScrollView>
            
        </View>
    )
styles = StyleSheet.create({
    container: {
        flex:1
      },
    text: {
        alignItems:'center',
        alignContent:'center',  
        paddingTop:wp("20%"),
        fontSize:wp("5%"),
    },
}

以下是标题栏的外观：

问题是2个图标位置。左边的图标应该从最左边开始，右边的图标应该在最右边。 `alignContent:"flex-start/flex-end" 图标不起作用。将 TextInput flex 增加到 2 个图标的 10 截断部分，并且没有将图标推开。如何将这两个图标移动到它们的位置？

【问题讨论】：

标签： css react-native

【解决方案1】：

只要给justifyContent: 'space-between'，它就会把左边的项目放在最左边，右边的项目放在最右边

【讨论】：

不幸的是，space-between 没有将 2 个图标移开。他们保持在同一个位置。

【解决方案2】：

搜索栏是自己构建的，而不是使用 react-native-elements 中的Header。这是代码：

return (
   
        <View style={styles.container}>
            <Header 
            containerStyle={{backgroundColor: '#f4511e'}}
            centerComponent={<HeadCenter />}
            />
             <View style={{ bottom:hp("0%"), alignContent:"space-between", paddingTop:hp("0.1%"),flexDirection:"row", width:"100%", height:hp("7%")}}>. //<<==this is the View bloc to hold search bar.
                
                <View style={{flex:1, alignContent:"flex-start",justifyContent:"center",alignItems:"center"}}>
                    <Pressable  onPress={()=>{submit()}} >
                        <Icon  name="search-outline" color="black" size={hp("4.4%")}/> 
                    </Pressable>
                </View>
                
                <View style={{flex:5}}>
                    <TextInput  style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>
                </View>
                <TouchableOpacity  onPress={()=>{navigation.navigate("MyHelp")}} >
                <View style={{flex:2, alignContent:"flex-start", justifyContent:"center",alignItems:"center"}}>
                    
                        <Icon  name="help-outline" color="black" size={hp("4.4%")}/> 
                     
                </View>  
                </TouchableOpacity>            
            </View>
            
            <ScrollView>
    ....
            </ScrollView>
    )

【讨论】：