反应本机矢量图标

Question

I am working on developing a mobile app and want to add a react native vector icon component. The problem is that the icon is not showing up--it seems to be invisible. It know it is there because it is influencing a nearby element that shares the same flexbox.

Here are the imports:

import React from "react";
import { Image, Text, View, Pressable } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { styles } from "./styles";

And here is the specific place in my code where I'm introducing the Icon

<Icon name="checkbox-outline" size={40} color='black'/>

As well as the broader "Post" function in which it's used

postFunction

To give some context, this function is for a "post" that one would see on a "feed". Think of Twitter or Instagram.

Here is also a screenshot of what the result looks like when this post function is called multiple times. Notice that the Icon should be showing up at the bottom left corner of each post. And the button (which has row flex of 1) is not covering the entire width indicating the Icon is present but not visible.

results

What is going wrong?

Answer 1

after installing React-native-vector-icons , you must always run this command :

react-native link

otherwise the icons will not appear