Блог

Главная - Вопросы по программированию - Значки не отображаются в кнопках заголовков в React-native

Значки не отображаются в кнопках заголовков в React-native

#react-native #react-native-vector-icons

Вопрос:

Значки не отображаются в кнопках заголовка. Вместо этого отображается только текст, указанный для резервного копирования. Вот мой код для компонента:

 import React from "react";

import { Platform } from "react-native";
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from 'react-native-vector-icons';

import Colors from '../constants/Colors';

const CustomHeaderButton = props => {
    return (
        <HeaderButton
            {...props}
            IconComponent={Ionicons}
            iconSize={23}
            color={Platform.OS === "android" ? "white" : Colors.primaryColor}
        />
    );
};

export default CustomHeaderButton;

Вот файл, в который я его импортировал:

 import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import { MEALS } from '../data/dummy-data';
import HeaderButton from '../components/HeaderButton';

const MealDetailScreen = props => {

    const mealId = props.navigation.getParam("mealId");

    const selectedMeal = MEALS.find(meal => meal.id === mealId);

    return (
        <View style={styles.screen}>
            <Text>{selectedMeal.title}</Text>
            <Button title="Go back to Categories!" onPress={() => {
                props.navigation.popToTop();
            }} />
        </View>
    );
}

MealDetailScreen.navigationOptions = (navigationData) => {
    const mealId = navigationData.navigation.getParam("mealId");
    const selectedMeal = MEALS.find(meal => meal.id === mealId);
    return {
        headerTitle: selectedMeal.title,
        headerRight: () => (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item
                    title="Favorite"
                    iconName="star"
                    onPress={() => {
                        console.log("Mark as favorite.");
                    }}
                />
            </HeaderButtons>
        )
    };

};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "white"
    }
});

export default MealDetailScreen;

Это не дает никаких ошибок и выдает вывод в консоли. Но значок для звезды не отображается.

Ответ №1:

Привет, вы можете исправить эту проблему, перейдя в раздел android/app/build.gradle, вставьте эту строку вверху и повторно запустите приложение, react-native run-android 

 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Комментарии:

1. спасибо за решение, но все еще не дающее желаемого результата

Ответ №2:

добавьте приведенный ниже код в android/app/build.gradle и повторно запустите приложение.

 project.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to 
copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Ответ №3:

Я понял ошибку. Вместо этого:

 import { Ionicons } from 'react-native-vector-icons';

Я добавил это:

 import Ionicons from 'react-native-vector-icons/Ionicons';

и появилась иконка.

Метки: