React-native-vector-icons 显示晦涩的符号

Question

I've installed react-native-vecotor . And when using them, they showing obscure symbols. How to use this library? Platform: Android

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const SearchBar = () => {
    return (
        <View style={styles.background}>
            <Icon name="md-body" color='#000'  size={25} />
        </View>
    );
};
const styles = StyleSheet.create({
    background:{
        backgroundColor:'#F0EEEE',
        marginHorizontal: 15,
        height:45,
        borderRadius:5,
    }
});
export default SearchBar;

Answer 1

Ionicons has no element name body . You can check here react-native-vector-icons

<Icon name="ios-body" color='#000'  size={25} />

Answer 2

If you are using react-native version 0.60++ then it must be the linking problem!

I was facing same after updating react-native, but solved by this, Follow my instructions.

1. Clean your gradlew (Optional but recommended)
   To clean gradle go to android folder and open cmd & run gradlew clean

2. Go to android/app/build.gradle add this at the end of file => apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3. Now re-compile (react-native run-android/run-ios) It must be working now...

Answer 3

I just reinstall project application from my device. It's works!