react native安装配置图标库react-native-vector-icons以及安装配置react-navigation

从零开始的react native项目；会持续更新，敬请期待

1、项目初始化

//初始化项目
npx react-native init gloryApp

//开启react-native服务；此处推荐用yarn，cnpm和npm也可以
yarn start

//开启android模拟器；同react-native run-androi
npm run android 

//开启ios模拟器；同react-native run-ios
npm run ios

2、安装react-native-vector-icons的icon库链接🔗

• 添加这个库到项目中

yarn add react-native-vector-icons

IOS中配置

• 拷贝以下代码到ios/gloryApp/Info.plist中（注意不要放到key、value的简直对中间）

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

• 到ios目录下pod install安装，即可在ios中使用这个图标库

Android中配置

• 拷贝以下代码到android/app/build.gradle中,便可以使用这个库了

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

⚠️注意：完成上面操作之后，需要react-native run-ios和react-native run-android重新启动两个模拟器

项目中使用

图表库链接🔗

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

<Ionicons name={'bluetooth'} size={90} style={{color:'blue'}}/>

3、安装react-navigation库

• 安装第三方库

//安装第三方主库
yarn add react-navigation

yarn add react-navigation-stack

yarn add react-navigation-drawer

yarn add react-navigation-tabs

//安装react-native-gesture-handler依赖库
yarn add react-native-gesture-handler

//安装react-native-reanimated动画库
yarn add react-native-reanimated

⚠️注意：4.x版本开始将createStacknavigator、createDrawerNavigator、createBottomTabNavigato、createTopMaterialTabNavigator分拆到不同的库中

• pod install

pod install

• 配置react-native-gesture-handler

//切换到路径
cd android/app/src/main/java/com/gloryApp/

//编辑MainActivity.java,添加以下代码
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

@Override
   protected ReactActivityDelegate createReactActivityDelegate() {
     return new ReactActivityDelegate(this, getMainComponentName()) {
       @Override
       protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
       }
     };
   }

⚠️注意：完成之后重启android和ios的模拟器