Центр текста в FlatList рядом с иконкой - React Native

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, а затем центрировать текстовый тег по вертикали.Попробуйте это и дайте мне знать.Может потребоваться обернуть значки в отдельный тег изображения.если код avode не работает, это означает, что отдельный тег необходим, поэтому дайте мне знать!

<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 в этом случае.Кажется, это ошибка с реакцией родной.Также я использовал 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

Для того, чтобы покрыть векторные иконкиlib, я создал закусочную Экспо для производства желаемого поведения.Экспо Снэк также имеет ожидаемое решение проблемы Экспо Снэк