在FlatList中的中心文本在图标反应本机旁边

Question

目前，我正在尝试将FlatList中的文本居中。我的意思是，我希望它在中间，在每个图标的右边。

目前，这是如何显示，它在底部。我只想再高一点：

​

下面是我的组件的样子:我尝试实现了很少的样式，但仍然没有成功。我脑海中闪现但没有尝试的是硬编码每一行并放弃循环，但我不确定这样做是否正确。

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,
    }

  });

Answer 1

您需要将文本标记包装在View/TouchableHighlight标记中，然后垂直地对文本标记进行居中。试试这个让我知道。您可能需要将图标包装在一个单独的图像标记中。如果代码不工作意味着一个分隔标签是必要的，所以让我知道！

<TouchableHighlight  
  style={styles.buttonsStyle}
  onPress={() => this.props.navigation.navigate(`${item.page}`)}
>
   <Text>{item.icon}{item.key}</Text>
</TouchableHighlight>
...
...
...
//in the styles add
buttonsStyle:{
  justifyContent: 'center',
}

EDIT1

为了包装图标，应该如下所示。请注意，在这种情况下不能使用TouchableHighlight。它似乎是一个带有反应本土化的bug。因为我用了TouchableOpacity

renderItem={({item}) => {
   return (
     <TouchableOpacity 
       style={styles.buttonsStyle} 
       onPress={() => this.props.navigation.navigate(`${item.page}`)}
     >
       <Image style={styles.imgStyles} source={item.icon} />
       <Text style={styles.mappedTextStyle}>{item.key}</Text>
     </TouchableOpacity>
    )
  }}

要更改/添加的样式

    buttonsStyle:{
      alignItems: 'center',
      flexDirection:'row',
      marginTop: 5, 
    },
    imgStyles:{
      width: 40, 
      height: 40, 
      marginRight: 10
    },
    mappedTextStyle: {
      fontSize: 18,
      color: 'black'
    },

编辑2

为了涵盖矢量图标库，我创建了一个世博小吃，用于制作所需的行为。世博会小吃也是世博小吃问题的解决方案。