我的第一个reactNative项目用到的插件、组件及依赖

1. 安装reactnative

npx react-native init NavStudy --version 0.60.0  //版本号自行定义

2. 安装react-navigation

 npm install react-navigation

3. 安装这些运行时依赖
   （ react-native-reanimated
   react-native-gesture-handler
   react-native-screens
   react-native-safe-area-context
   @react-native-community/masked-view）

npm install react-native-reanimated  react-native-gesture-handler react-native-screens  react-native-safe-area-context   @react-native-community/masked-view

4. 安装navigatior库

 npm install react-navigation-stack

5. 安装reactnative的UI组件库

npm install @ant-design/react-native --save

npm install @ant-design/icons-react-native

react-native link @ant-design/icons-react-native //链接所有的图标

或 (连接失败的情况下，升级@ant-design/react-native 到4.0.0，执行下列命令)

npx react-native link

6. 安装babel-plugin-import（按需加载）(使用ant-design，会按需加载)

npm install --save-dev  babel-plugin-import

然后在 babel.config.js中添加

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  "plugins": [
    ["import", { "libraryName": "@ant-design/react-native"}]
  ]
};

在所需要的的页面引入

import { Button } from '@ant-design/react-native';

7. 安装轮播图组件

npm install --save react-native-swiper

8. 安装react-navigation-tabs，底部导航

npm install react-navigation-tabs --save