我的React_Native 用到的第三方(持续更新中)

我的React_Native 用到的第三方(持续更新中)

React-Navigation

参考:https://github.com/react-community/react-navigation

它是用来做页面跳转栈管理和页面框架的。


引入步骤:

1、在项目目录下执行:yarn addreact-navigation

yarn是用来替代命令的~

包含内容:

StackNavigator :用于app界面窗口之间的切换

TabNavigator :用于设置一个界面的不同tabs

DrawerNavigator :用于抽屉界面

 

react-native-vector-icons

参考:https://github.com/oblador/react-native-vector-icons

它是用来做图标展示的,通过它可以引用很多图片库的icon。


引入步骤:

1、在项目目录下执行:npm install react-native-vector-icons --save

2、在app/build.gradle下添加

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

我的React_Native 用到的第三方(持续更新中)_第1张图片

3、在setting.gradlie中添加:

4、在app/build.gradle中添加

我的React_Native 用到的第三方(持续更新中)_第2张图片

5、在MainApplication中引入:

我的React_Native 用到的第三方(持续更新中)_第3张图片

 

包含内容

Icon

Icon.Button

Icon.TabBarItem

使用:

vector中继承了很多矢量图库,这里,我引入的是FontAwesome的。


图片库地址:http://fontawesome.io/icons/

使用:

参考:

http://blog.csdn.net/margaret_mo/article/details/51335774

我用Android开发的,

我的React_Native 用到的第三方(持续更新中)_第4张图片

注意:这里的onPress={this.loginWithFacebook}赋值过程,这样赋值是正确的,如果是onPress={this.loginWithFacebook()}这样,那么将不是赋值,而是直接在执行loginWithFacebook这段代码

 

效果:

我的React_Native 用到的第三方(持续更新中)_第5张图片

这里的Icon.TabBarItem,没出效果,等我后面弄到TabView的时候再来补完


axios

用来替代原生fetch的网络库。目前比较流行。

参考:https://github.com/axios/axios

引入步骤:

1、npm install axios –S

(这-S 是-save的意思,直接配置到package.json文件中)

包含内容:

就是纯粹的http请求,同时支持promise的使用。

使用:

封装:

我的React_Native 用到的第三方(持续更新中)_第6张图片

使用:

 我的React_Native 用到的第三方(持续更新中)_第7张图片

 

 

 

 


 

 

 

 

 

你可能感兴趣的:(react,native学习之路)