第三章 RN开发基础—布局基础、样式控制基础、官方组件应用;利用属性(Props)和状态(state)传递数据、从网络获取数据和图片;封装JS组件和从GitHub引入第三方纯JS组件

在本章和后面的章节中,将通过具体的Demo来介绍相关内容。

Demo只介绍大体的用法。一些细节的东西,都在代码注释中详细说明,感兴趣的请下载代码~下面是demo1--firstRNapp的页面效果:

项目git地址:https://github.com/yujiesuperman/react-native-demo1

        Demo1完成了题目中包含的几件事,布局的基础、样式的控制、官方的Text组件和Image组件的应用;利用属性(Props)和状态(state)传递数据;从网络上Get到了数据和图片;封装了一个纯Js的button组件,同时还讲到了从GitHub引入第三方纯JS组件的方法。

下面先看下项目的目录结构:

       我们会发现相对于之前的demoRN项目多了一个src目录,这个目录是Rn项目的开发目录,在这里因为功能的原因暂时只有一个组件component目录,里面放着我们自己封装的Button.js(一个按钮,在点击后变灰色,等数据加载完后变绿色)。

(一)先从入口文件看起:

上图的两个import是固定写法,不过第二个要把js中用到所有的组件涵盖进来;下面的两句import一个是引入了自定义的组件,另一个是引入第三方的纯js组件,第三方组件的地址是:

https://github.com/magicismight/react-native-root-toast

像这种纯js的第三方组件使用方式非常简单,cd到项目中,直接

npm installreact-native-root-toast --save

备注:后面的save是将这个组件自动添加到package.json账本中,然后import第4句就可以直接Toast.show(“”)这样调用了。纯js的第三方组件一般是支持Android和ios两端的;

1)下面类的构造中使用了两个概念:

①props(属性):大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

说的通俗点,就是在别人调用你的时候,传给你的参数,你可以通过this.props.属性名这样拿到,这是调用我们button的时候传过来的3个属性:

这是使用的时候:

获取到的text和bgcolor变量

②对于需要改变的数据,我们需要使用state。一般来说,你需要在constructor中初始化state。给或者不给state一个初始值,然后在网络数据加载完后,更新state。Rn有这样一种世界观,改变状态,就能改变视图!

2)网络请求

这是网络请求的代码部分,除了可以使用Fetch外,还支持websocket和ajax。详见:http://reactnative.cn/docs/0.41/network.html#content

备注:默认情况下,iOS会阻止所有非HTTPS的请求。如果你请求的接口是http协议,那么首先需要添加一个App Transport Securty的例外,如下:

3)样式布局基础

render()方法中返回一些用于渲染结构的JSX语句,就是页面长啥样主要看这~

备注:可以看到,方法内注释的方法,和方法外注释的方法

这里有一些基础的标签的使用比如<Text>、<Image>、<View>

还有样式的定义StyleSheet.create 以及使用的方式,(一个组件使用两种样式的方法),在样式中也有布局的基础属性(Flexbox):一般来说,使用flexDirection、alignItems和justifyContent三个样式属性就已经能满足大多数布局需求:

①在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列呢?默认值是竖直轴(column)方向。

②在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?

③在组件的style中指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢?亦或应该均匀分布?

详细学习的话就需要去官方文档或者Rn中文网上认真看了

(二)下面我们来看component中的Button.js

我们发现导入了一个TouchableOpacity组件,本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级。

它的点击事件触发了自定义的方法,这种自定义的方法如果想使用this.XXX就必须要进行绑定,注释里详细说明了两种绑定的方式,

备注:注释里有很多细节的理解的东西,在这里就不一一说了,可以参考(看到这里还没绕行的大神就将就着看吧)

下面请回顾三个位置的代码:一个是button.js,一个是入口的fetch网络请求处,另一个是入口调用<Button>的位置;

这里由于fetch是一个异步的请求,需要实现的效果是在点击后首先将自定义Button置灰,然后待请求结束数据正确后,将Button重新变绿,重置为可点击。现在置灰和置绿的方法全都在Button.js中,想要在入口(index.android.js)中的fetch的回调函数 中调用也有两种方式,:

①在调用Button组件的位置处添加ref={“XX”},这样,就可以在fetch的地方使用this.refs.XX找到真正的Button组件,然后再.enable()。

②另一种就是类似于Android Native开发的回调了,也就是本Demo实现的方法,将enable方法传出去。Demo的入口文件将fetch方法通过props参数传给Button,Button的点击事件触发后,拿到并执行fetch方法,同时将enable方法作为方法参数传出去;这样,就能在fetch中调到enable了

备注:并不是一定要为state初始化一个值,本demo因为入口文件的state在没请求网络的时候就需要展示一个默认值(render中的内容在页面一加载时就会调用),所以才在构造中为它进行了初始化,否则报错。

总结:

第一个Demo的介绍到此结束,类似常用的官方组件Listview和Scrollview等就不再详细介绍了,在这里只把目录提到的内容做个展示,目的就是让你入个门,能跟别人逼逼两句react native,想具体学习还请学习官方文档,或者Rn中文网上学习。

推荐阅读更多精彩内容