Question

我当前正在尝试将FlatList中的文本居中。通过居中表示我希望它位于每个Icon的中间。

当前是这样显示，它在底部。我只是希望它更高一点：

这是我的组件的外观：我尝试实现几种样式，但仍然没有成功。我想过但没有尝试过的事情是对每一行进行硬编码并删除循环，但是我不确定这样做是否正确。

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

您需要将Text标签包装在View/TouchableHighlight标签中，然后将text标签垂直居中。试试这个，让我知道。您可能需要将图标包装在单独的图像标签中。如果该代码无法正常工作，则意味着必须使用分隔的标签，所以请告诉我！

<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

为了涵盖矢量图标库，我创建了Expo小吃以产生所需的行为。世博会小吃也可以解决问题Expo Snack

FlatList中位于Icon旁边的中心文本-React Native

1 个答案: