React Native 链接原生库，从开发到使用

本文原创，转载需告知并注明来源。建议使用宋体阅读
》原文链接：https://www.jianshu.com/p/8761fe30065c
》邮件联系：mr.huangjian@foxmail.com

与普通模块的开发与使用不同的是，链接原生库的模块需要：

1. 开发原生代码
2. iOS 工程存放到 ios 目录下， Android 工程存放到 android 目录下，其中目录名是确定的！
3. 通过 react-native link 命令链接原生库

开发

我们创建一个供 React Native 使用的 npm 模块， 目录结构类似于：

...
├── android         # Android 工程目录
├── ios             # iOS 工程目录
├── index.js        # React Native (JS) 相关文件
└── package.json    # 模块配置文件

可参考别人已经写好的 react-native-default-preference

---

使用

通过使用 npm i xxx 安装模块，然后通过命令 react-native link xxx 或 react-native link 进行原生库的链接。

$ react-native link
Scanning folders for symlinks in /Users/Calorie/Desktop/test/node_modules (21ms)
rnpm-install info Linking react-native-default-preference ios dependency 
rnpm-install info Platform 'ios' module react-native-default-preference has been successfully linked 
rnpm-install info Linking react-native-default-preference android dependency 
rnpm-install info Platform 'android' module react-native-default-preference has been successfully linked 

$ react-native link react-native-default-preference
Scanning folders for symlinks in /Users/Calorie/Desktop/test/node_modules (10ms)
rnpm-install info Platform 'ios' module react-native-default-preference is already linked 
rnpm-install info Platform 'android' module react-native-default-preference is already linked 

react-native link xxx 命令大致运行原理：

1. 在 package.json 检测是否包含 xxx 依赖，如果包含该依赖则进行下一步;
2. 访问 ./node_modules/xxx 目录，然后找到 ios 和 android，判断这两个目录是否包含对应系统的工程文件;
3. 如在 ios 目录，找到 *.xcodeproj，这样就可以将该工程链接到原生库中了。

通过 react-native link xxx 命令可以链接到原生库，要注意两个地方以确保链接成功：

1. *.xcodeproj 添加到 Libraries 组;
2. 其对应生成的 *.a 添加到 Link Binary With Libraries。

image

如果没链接成功，也可以手动添加

参考链接：链接原生库

---