Вопросительный знак вместо значка в реакции навигации v5

Question

Я установил векторные иконки с помощью следующей команды:

npm install --save react-native-vector-icons

Затем импортировал иконки этим методом :( Я не использую expo)

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

Это основной код:

const MainTab=()=>{

  const Tab = createBottomTabNavigator();

  return(

<Tab.Navigator

screenOptions={({route})=>({
 tabBarIcon:({color, size})=>{
  let iconName;

  if (route.name=='Home') {

    iconName='ios-home'

  }else if(route.name=='Settings'){

  iconName='logo-settings'
 }

 return <Ionicons name={iconName} size={size} color={color} />
 }
})

>


<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SecondPage} />


</Tab.Navigator>
  )}

Он показывает знак вопроса вместо значков

Как я могу это исправить?

Answer 1

перейдите по этой ссылке ниже, это даст вам веб-сайты, на которых он получает иконки.

https://github.com/oblador/react-native-vector-icons#bundled-icon-sets

ios-home и logo-settings не являются частью Ionicons, поэтому вы получаете ? символ.

Answer 2

Эта проблема возникает из-за того, что имя вашей иконки не соответствует значкам в библиотеке. Попробуйте использовать разные типы значков и имен. Для вашего текущего кода замена iconName='ios-home' на iconName='home' и iconName='logo-settings' на iconName='settings' может работать.

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

import icon from fontAwesome5

<Icon name='home'/> и <Icon name='cog'/>

Вы можете найти список значков для fontAwesome здесь .

Answer 3

Иконки на самом деле являются шрифтами с картинками, заменяющими символы. Вы получаете эти символы, потому что браузер не распознает шрифт и не имеет печатного символа для go с этим.

Вам нужно перетащить шрифт в папку publi c вашего проекта, чтобы браузер может загрузить его с вашего сервера. Документы объясняют, как здесь:

https://github.com/oblador/react-native-vector-icons/blob/master/README.md#bundled -icon-sets

Это позволит вам использовать изначально выбранные имена иконок, такие как "ios -something"