ReactNatice> 0.6 version, the navigation icon at the bottom of react-navigation does not display the solution (Android)

Tutorial address: https://reactnavigation.org/docs/tab-based-navigation/

First make sure ReactNative> = 0.6,

1. Install react-navigation core

yarn add @react-navigation/native

2. Install navigation other dependencies

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Install the bottom label navigation component

yarn add @react-navigation/bottom-tabs

4. Clean up the cache of source compiled files after installing the component (regular operation)

# Into the project directory 
cd Android 
. / Gradlew Clean

The bottom navigation component is installed according to the react-navigation documentation. . .

 

 

Environment installation method using icons:

Reference: https://github.com/oblador/react-native-vector-icons#integrating-library-for-getimagesource-and-toolbarandroid-support

1. Install react-native-vector-icons component

yarn add react-native-vector-icons --dev

2. Since I am an Android development environment, I need to register Android components

Modify  android/app/build.gradle (not  android/build.gradle ) the file to add a line:

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