将文本居中显示在“图标-本地响应”旁边的平面列表中

我目前正在尝试将扁平列表中的文本居中。 “居中”是指我希望它位于每个图标的中间、右侧。

目前这是显示的方式,它在底部。我只想让它更高一点:

以下是我的组件的外观: 我尝试过实现一些样式,但仍然没有成功。 我脑海中闪过但没有尝试的事情是硬编码每一行并放弃循环,但我不确定这是否是正确的做法。

import socialicon from'react native vector icons/antdesign';
从“react native vector icons/fontawome”导入bookingicon;
从“react native vector icons/feather”导入羽化符;


导出const bookicon=(<bookingicon name=“pencil-square-o”size=40 color=“purple”/>gt;);
export const calendaricon=(<socialicon name=“calendar”size=40 color=“purple”/>);
export const questionicon=(<socialicon name=“questioncircleo”size=40 color=“purple”/>gt;);
export const externalLinkIcon=(<feathericons name=“external link”size=40 color=“purple”/>gt;);



类about扩展组件{
静态导航选项={
标题:“关于我”,
}
RelDead(){
返回(
<view style=styles.container>
<view style=styles.topbox>
<view style=styles.CircleOuter/>
<view style=styles.circle/>

&Lt/VIEW & GT;
<view style=styles.middlebox>

&Lt/VIEW & GT;
<view style=styles.bottombox>
扁平表
ContentContainerStyle=Styles.ListItem_
数据={[]
key:'预订免费预约',page:'预订',icon:book icon,
键:“可用性”,页面:“可用性”,图标:日历图标,
key:'faq',page:'faq',icon:questionicon,
key:'有用链接',page:'链接',icon:externalLinkIcon,
}
onPress=()=>this.props.navigation.navigate('book')
renderItem=(项)=>。{
返回(
<touchablehighlight onpress=()=>this.props.navigation.navigate(`$item.page `)>
<text>item.icon item.key</text>
</TouchableHighlight>
)
}
/gt;
&Lt/VIEW & GT;
&Lt/VIEW & GT;
;
};
};

const styles=样式表。创建({
容器:{
Flex:1
}
Topbox:{
Flex:3,
背景色:“红色”,
JustifyContent:'中心',
Alignitems:'居中'
}
中间框:{
弹性:1,
背景色:“黄色”
}
底部框:{
Flex:4,
背景色:“橙色”,
填料:20

}
循环:{
宽度:160,
身高:160,
边界半径:160/2,
背景色:“绿色”,
位置:“绝对”
}
圈外:{
宽度:180,
身高:180,
边界半径:180/2,
背景色:“黑色”
}
ListITEM:{
Flex:1,
justifycontent:'中心'
}
正文:{
字体大小:20,
}

})(二)
< /代码> <是如何显示的,它在底部。我只是想让它更高一点:


以下是我的组件的外观:
我尝试过实现一些样式,但仍然没有成功。
我脑海中闪过的,但没有尝试过的事情是硬编码每一行并放弃循环,但我不确定这样做是否正确。

import SocialIcon from 'react-native-vector-icons/AntDesign';
import BookingIcon from 'react-native-vector-icons/FontAwesome';
import FeatherIcons from 'react-native-vector-icons/Feather';


export const bookIcon = (<BookingIcon name="pencil-square-o" size={40} color="purple" />);
export const calendarIcon = (<SocialIcon name="calendar" size={40} color="purple" />);
export const questionIcon = (<SocialIcon name="questioncircleo" size={40} color="purple" />);
export const externalLinkIcon = (<FeatherIcons name="external-link" size={40} color="purple" />);



class AboutMe extends Component {
    static navigationOptions = {
      title: "About Me",
    }
    render() {
      return (
        <View style={styles.container}>
          <View style={styles.topBox}>
          <View style={styles.circleOuter} />
            <View style={styles.circle} />

          </View>
          <View style={styles.middleBox}>

          </View>
          <View style={styles.bottomBox}>
            <FlatList
              contentContainerStyle={styles.listItem}
              data={[
                {key: 'Book a free appointment', page:'Book', icon: bookIcon},
                {key: 'Availability', page:'Availability', icon:calendarIcon},
                {key: 'FAQ', page:'Faq', icon: questionIcon},
                {key: 'Useful Links', page: 'Links', icon: externalLinkIcon},
              ]}
              onPress={() => this.props.navigation.navigate('Book')}
              renderItem={({item}) => {
                  return (
                    <TouchableHighlight onPress={() => this.props.navigation.navigate(`${item.page}`)}>
                      <Text >{item.icon}{item.key}</Text>
                    </TouchableHighlight>
                  )
              }}
            />
          </View>
        </View>
      );
    };
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    topBox: {
      flex:3,
      backgroundColor: 'red',
      justifyContent:'center',
      alignItems: 'center'
    },
    middleBox: {
      flex:1,
      backgroundColor: 'yellow'
    },
    bottomBox: {
      flex:4,
      backgroundColor: 'orange',
      padding: 20

    },
    circle: {
      width: 160,
      height: 160,
      borderRadius: 160/2,
      backgroundColor: 'green',
      position: 'absolute'
  },
    circleOuter: {
      width: 180,
      height: 180,
      borderRadius: 180/2,
      backgroundColor: 'black'
  },
    listItem: {
      flex:1,
      justifyContent: 'center' 
    },
    text: {
      fontSize: 20,
    }

  });