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

最新推荐文章于 2025-11-26 22:06:23 发布

原创最新推荐文章于 2025-11-26 22:06:23 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #android #javascript #npm

移动端(reactnative/flutter) 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何从零开始搭建ReactNative项目，包括安装ReactNative基础环境、配置react-navigation进行页面跳转、安装并集成UI组件库@ant-design/react-native、实现按需加载、安装轮播图组件react-native-swiper及底部导航react-navigation-tabs等关键步骤。

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

安装reactnative

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

安装react-navigation

 npm install react-navigation

安装这些运行时依赖
（ 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

安装navigatior库

 npm install react-navigation-stack

安装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';

安装轮播图组件

npm install --save react-native-swiper

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

npm install react-navigation-tabs --save