[关闭]
@linux1s1s 2017-03-10T10:17:54.000000Z 字数 1997 阅读 1455

React-Native Primary 第三方库

React-Native 2017-03


RN 第三方库的查询网址:JS.coach

引用第三方库

如何将我们感兴趣的第三方库引入项目呢?

React Native 引用第三方组件 这篇博文,讲的很详细,并且验证过没有问题,所以为了方便参考,这里全部搬过来,特此说明。

不明白的地方可以参考React Native 引用第三方组件

删除第三方库

如何删除第三方库呢?

我们将上面新加的第三方库删除作为实验。

在删除之前,我们看看项目根目录下的两个与第三方库相关的文件

此处输入图片的描述

此处输入图片的描述

可以看到:

package.json声明了`react-native-device-info`依赖;
node_modules文件夹含有`react-native-device-info`依赖包

接下来我们开始删除这个依赖

  1. npm uninstall react-native-device-info

接下来我们看看上面提及的依赖和依赖包是否还在?

经验证:

所以我们得出结论: npm uninstall 仅仅删除了依赖包,而并没有修改依赖。

  1. npm uninstall -s -D -O react-native-device-info

上面的命令行不靠谱,我们保险起见加了几个参数

如果是组件作为devDependencies,需要加上-D,
如果是从optionalDependencies中删除,还需要加上-O的参数,

接着我们继续验证,还是和上面同样的问题,依然没有删除依赖。

既然两种方法都没有删除依赖,那是不是意味着不用删除依赖也无妨呢?
为了验证这个问题,我们编译一下项目即可。

结果果然让我们失望了,编译不通过,然后我们来找找原因。

此处输入图片的描述

删除compile project(':react-native-device-info')依赖,因为这个时候依赖包已经删除了,找不到依赖,当然会报错了。

继续检查是否有相应的包引入

  1. package com.awesomeproject;
  2. import com.facebook.react.ReactActivity;
  3. import com.learnium.RNDeviceInfo.RNDeviceInfo;
  4. public class MainActivity extends ReactActivity {
  5. /**
  6. * Returns the name of the main component registered from JavaScript.
  7. * This is used to schedule rendering of the component.
  8. */
  9. @Override
  10. protected String getMainComponentName() {
  11. return "AwesomeProject";
  12. }
  13. }

删除import com.learnium.RNDeviceInfo.RNDeviceInfo;即可。

以上步骤完成以后再次验证编译是否成功。

不出意外的话,编译通过,如果编译不过,需要继续删除引用到第三库的相关代码即可。

推荐第三方库

看描述是解决了传统RNListView的内存问题,来个直观图对比一下:

RNListView
此处输入图片的描述

SGListView
此处输入图片的描述

推荐第三方框架

以下的框架能够极大的精简开发,基本框架可以快速生成。
- GeekyAnts/NativeBase
- react-native-elements

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注