ReactNative►第一章：ReactNative入门

第5节：ReactNative的常用库

[TOC]

前言

一、安装指定版本

https://www.cnblogs.com/cisum/p/8401255.html

您可以通过指定依赖版本或 标签来指定要安装的软件包的版本。

1
2
yarn add [package]@[version]
yarn add [package]@[tag]

的[version]或[tag]将是什么被添加到您的package.json ，然后解决安装时依赖对。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
yarn add package-1@1.2.3
yarn add package-2@^1.0.0
yarn add package-3@beta

yarn add react-navigation

结果会是：
{
  "dependencies": {
    "package-1": "1.2.3",
    "package-2": "^1.0.0",
    "package-3": "beta"
  }
}

link失败，怎么办

image-20191118221937663

诸如此类，其实是 react-native link react-native-gesture-handler 失败。

重复执行上述命令还是失败。怎么办？

答：直接手动remove掉RNGestureHandler.xcodeproj，然后再手动添加吧。

一、常用ReactNative库

查找地址：https://www.npmjs.com/package/

其他常用库文章：React Native插件系列之插件汇总

类型 库 Stat ⭐️
导航 react-navigation
及其Navigation prop reference(导航属性)
日历 react-native-calendars
Tab react-native-tab-navigator⭐️2187
日期计算 moment(github)⭐️41285
官网地址
地图 react-native-amap3d(github)⭐️690
图片浏览 react-native-image-viewer⭐️1361
轮播图 react-native-swiper⭐️7776
图片选择 react-native-image-picker⭐️5311
日期选择 react-native-datepicker ⭐️1585
进度显示 react-native-progress⭐️2358
Toast react-native-root-toast⭐️1191
网页

Picker相关

link方法：

二、导航(react-navigation)

官网文章：

参考文章：

  • 关于react-navigation 3.x的使用

    在安装3.x后，需要将最外层的包裹形式修改为createAppContainer

    在之前的版本中，使用createStackNavigator后，就会自动实现createAppContainer，但在新版本中，需要手动使用createAppContainer来包裹最外层的路由。

三、网页

使用

1
2
#import { WebView } from 'react-native';					# 被废弃的
import { WebView } from "react-native-webview";	# 现在使用的(附只支持 platform :ios, '9.0')

如果使用react-native中的WebView会提示如下警告：

react-native-webview

意思是webwiew要废了.不用了.

于是安装他们推荐的,用下面的命令
yarn add react-native-webview
react-native link react-native-webview

三、日期选择(react-native-datepicker)

1、安装及使用方法

官网地址：react-native-datepicker

1
npm install react-native-datepicker --save

2、主要参数说明

date：设置初始显示的日期
mode：显示的模式，date,datetime,time
format：设置日期格式，默认为’YYYY-MM-DD’
confirmBtnText：确定按钮的显示名称
cancelBtnText：取消按钮的显示名称
minDate：显示的最小日期
maxDate：显示的最大日期
duration：时间间隔
onDateChange：日期变化时触发的事件
placeholder：占位符

四、Antd库

1、各Antd库区别

类型 antd antd-mobile @ant-design/react-native
官网地址 https://ant.design/docs/react/introduce-cn https://mobile.ant.design/docs/react/introduce-cn https://rn.mobile.ant.design/docs/react/introduce-cn
安装命令 npm install antd –save npm install antd-mobile –save npm install @ant-design/react-native –save
特性和优势 UI 样式高度可配置，拓展性更强，轻松适应各类产品风格

2、RN-ANTD踩坑记