Реагировать родные векторные иконки, показывая X вместо значка

Question

Я не могу понять это. Я могу получить что-то, чтобы показать, но это коробка с X в нем, так что я предполагаю, что он не поднимает векторные иконки. Любой совет?

У меня есть значок шоу true, у меня есть оттенок цвета, у меня есть векторные иконки (я пробовал и ионы, и шрифт потрясающие, но безрезультатно.

Код:

import React, { Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react- 
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';

class HomeScreen extends Component {

    static navigationOptions = {
        title: 'Home'
    };

 render(){
     return (
         <View style={{ flex:1, alignItems:'center', justifyContent:'center' 
         }}>
             <Text>Home Screen</Text>
         </View>
     );
  }
  }

  const RootStack = createBottomTabNavigator(
      {
          Home: {
              screen: HomeScreen,
              navigationOptions: {
              tabBarLabel: 'Home',
              tabBarIcon: ({ tintColor }) => (
                  <Icon name = 'home' size={25} color={tintColor} />
              )
          }
      },
   },

   {
        tabBarOptions: {
        showIcon:true,
        tintColor:'red'
   }
  }
  );

  const AppContainer = createAppContainer(RootStack);

  const styles = StyleSheet.create({

 })

export default class App extends Component{
   render(){
   return <AppContainer />;
   }
}

Answer 1

Я использую собственную версию 0.62, и я тоже столкнулся с этой ошибкой. Хотя версии 0.60+ response native предоставляют функцию автоматического связывания, но для react-native-vector-icons это исключение. Вам нужно связать его вручную. Чтобы решить эту проблему, выполните следующие действия.

1. rm -rf node_modules
2. пряжа
3. пряжа реагирует на родную ссылку

Надеюсь, это поможет.

Answer 2

Исправлено это. Как только я понял, что это были векторы, я просто связал реактивно-нативные с реактивно-нативными векторами.

Answer 3

Решение:

1. Откройте файл android/app/build.gradle.

2. Добавьте следующую строку внутри блока Android:

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

3. Ваш блок Android должен выглядеть примерно так:

          android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.yourapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        // ...
    }
    // ...
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. Сохраните и закройте файл android/app/build.gradle.

5. Откройте свой терминал.

6. Запустите следующую команду, чтобы связать пакет векторных значков:

          npx react-native link react-native-vector-icons

7. После привязки пакета запустите приложение на Android:

          npx react-native run-android

У меня это сработало, поэтому я надеюсь, что если вы последуете этому подходу, он сработает и у вас.

Источник : https://samtapes.medium.com/solve-icons-not-showing-up-react-native-vector-icons-78c312fcf692 .