React-Native中一些常用组件的用法详解(二)

前言

本文为大家介绍一下react-native中一些深入些的组件，由于对es6的语法并没有完全掌握，这里暂时用es5和es6混用的语法。

scrollview组件

能够调用移动平台的scrollview（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

注意一定要给scrollview一个高度，或者是他父级的高度。

常用方法

• onscrollbegindrag:开始拖拽的时候;
• onscrollenddrag：结束拖拽的时候;
• onmomentumscrollbegin：开始滑动;
• onmomentumscrollend：开始滑动;

特殊组件

• refreshcontrol 以用在scrollview或listview内部，为其添加下拉刷新的功能。
• 当scrollview处于竖直方向的起点位置（scrolly: 0），此时下拉会触发一个onrefresh事件。

示例

创建一个scroll.js文件

代码如下：

import react, { component } from 'react';
import {
 stylesheet,
 view,
 scrollview,
 refreshcontrol
} from 'react-native';
var datasource = require("./data.json");
// 创建组件
var scrolltest = react.createclass({
 // 下面的几种函数可以根据自己的需求添加
 _onscrollbegindrag () {
 // 这里是开始拖拽的函数
 },
 _onscrollenddrag () {
 // 这里是拖拽结束的函数
 },
 _onmomentumscrollbegin () {
 // 这里是开始滚动的函数
 },
 _onmomentumscrollend () {
 // 这里是滚动结束的函数
 },
 _refresh () {
 // 这里是请求数据的函数
 alert("正在请求数据");
 },
 render () {
 return (
  <scrollview style={styles.container}
   onscrollbegindrag={this._onscrollbegindrag}
   onscrollenddrag={this._onscrollenddrag}
   onmomentumscrollbegin={this._onmomentumscrollbegin}
   onmomentumscrollend={this._onmomentumscrollend}
   refreshcontrol={
    <refreshcontrol refreshing={false}
      titlecolor={"red"}
      title={"正在刷新......."}
      tintcolor={"cyan"}
      onrefresh={this._refresh} />
   }>
  <view style={[styles.item, styles.item1]}></view>
  <view style={[styles.item, styles.item2]}></view>
  <view style={[styles.item, styles.item3]}></view>
  </scrollview>
 )
 }
});
// 实例化样式
var styles = stylesheet.create({
 container: {
 margintop: 25,
 height: 300,
 borderwidth: 1,
 bordercolor: "#ccc"
 },
 item: {
 width: 280,
 height: 150,
 margin: 20
 },
 item1: {
 backgroundcolor: "red"
 },
 item2: {
 backgroundcolor: "green"
 },
 item3: {
 backgroundcolor: "yellow"
 }
});
module.exports = scrolltest;

再将index.ios.js文件改成如下：

import react, { component } from 'react';
import {
 appregistry,
 view,
} from 'react-native';
var scroll = require("./scroll");
var scrolltest = react.createclass({
 render () {
 return (
  <view>
  <scroll></scroll>
  </view>
 )
 }
});
appregistry.registercomponent('usecomponent', () => scrolltest);

最终效果：

listview组件

用于高效地显示一个可以垂直滚动的变化的数据列表。

最基本的使用方式就是创建一个listview.datasource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个listview组件，并且定义它的renderrow回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为listview的每一行）。

数据处理

listview.datasource为listview组件提供高性能的数据处理和访问。

我们需要调用方法从原始输入数据中抽取数据来创建listviewdatasource对象，并用其进行数据变更的比较。

datasource初始化：

getinitialstate:function () {
// 实例化datasource对象
 var ds = new listview.datasource({
 rowhaschanged:(olddata,newdata) => olddata !== newdata
 });
 return {
 data:ds.clonewithrows(news)
 }
}

常用属性

• 设置数据源：datasource={this.state.datasource}
• 设置列表组件：renderrow={this._renderrow}
• 设置listview头部：renderheader={this._renderheader}
• 设置列表项之间的间隔：renderseparator={this._renderseparator}

示例 制作一个电影列表

博主先前从猫眼电影里获取了一些电影介绍的json文件，有兴趣的同学可以去猫眼电影列表获取一些信息，注意这里需要json格式转换一下！

这里创建一个movielist.js的文件

代码如下：

import react, { component } from 'react';
import {
 stylesheet,
 text,
 view,
 image,
 listview
} from 'react-native';
// 通过listview实现电影列表
var movies = require("./data.json").data.movies;
// 创建组件
var listmovie = react.createclass({
 getinitialstate () {
 var ds = new listview.datasource({
  rowhaschanged: (olddata, newdata) => olddata !== newdata
 });
 return {datasource: ds.clonewithrows(movies)}
 },
 _renderrow (movie) {
 return (
  <view style={styles.row}>
  <image style={styles.img} source={{uri: movie.img}}/>
  <view style={styles.right}>
   <text style={styles.name}>{movie.nm}</text>
   <text style={styles.dir}>导演：{movie.dir}</text>
   <text style={styles.dir}>上映时间：{movie.rt}</text>
  </view>
  </view>
 )
 },
 _renderheader () {
 return (
  <view style={styles.header}>
  <text style={styles.title}>猫眼热门电影</text>
  <view style={[styles.separator, {width: "100%"}]}></view>
  </view>
 )
 },
 _renderseparator () {
 return <view style={styles.separator}></view>
 },
 render () {
 return <listview style={styles.container}
    datasource={this.state.datasource}
    renderrow={this._renderrow}
    renderheader={this._renderheader}
    renderseparator={this._renderseparator}
  />
 }
});
// 实例化样式
var styles = stylesheet.create({
 container: {
 margintop: 25
 },
 row: {
 flexdirection: "row",
 alignitems: "center",
 padding: 10
 },
 img: {
 width: 78,
 height: 128
 },
 right: {
 marginleft: 15,
 flex: 1
 },
 name: {
 fontsize: 20,
 fontweight: "bold",
 margintop: 3,
 marginbottom: 10
 },
 dir: {
 fontsize: 15,
 marginbottom: 3,
 color: "#686868"
 },
 header: {
 height: 44,
 alignitems: "center"
 },
 title: {
 fontsize: 25,
 fontweight: "bold",
 lineheight: 44
 },
 separator: {
 height: 1,
 backgroundcolor: "#ccc"
 }
});
module.exports = listmovie;

再将index.ios.js文件改成如下：

import react, { component } from 'react';
import {
 appregistry,
 view,
} from 'react-native';
var listmovie = require("./listmovie");
var movie = react.createclass({
 render () {
 return (
  <view>
  <listmovie></listmovie>
  </view>
 )
 }
});
appregistry.registercomponent('usecomponent', () => movie);

最终效果：

navigator组件

使用导航器可以让你在应用的不同场景（页面）间进行切换。其实质上类似于html里导航条功能。

不过导航器页面的跳转需要通过路由对象来分辨不同的场景。

利用renderscene方法，导航栏可以根据指定的路由来渲染场景。

导航器的设置步骤

第一步：设置属性initialroute：初始化route对象，指定默认页面，也就是启动app之后所看到的第一个页面；

第二步：configurescene：配置场景动画和手势；

第三步：renderscene；渲染场景，参数route（第一步创建并设置的导航器路由对象），navigator（导航器对象）

代码展示：

<navigator
 initialroute={rootroute}
 configurescene={(route)=>navigator.sceneconfigs.pushfromright}
 renderscene={
 (route,navigator)=>{
  var myscenecomponent = route.component;
  console.log(myscenecomponent);
  console.log(“aaaa”);
  return (
  <myscenecomponent route={route} navigator={navigator}/>
  )
 }
 }
/>

示例

创建一个nav.js文件

代码如下：

/**
 * created by lanou on 17/4/13.
 */
import react, { component } from 'react';
import {
 stylesheet,
 text,
 view,
 navigator,
 touchableopacity,
 textinput
} from 'react-native';
// 在进行导航时，需要先构成一些页面，使用navigator
// 创建组件
var firstpage = react.createclass({
 getinitialstate () {
 return {text: ""}
 },
 savetext (text) {
 this.setstate({text: text})
 },
 changepage () {
 // 把需要传递的值，都放在路由的nextpass属性里
 var nextroute = {
  component: secondpage,
  nextpass: {text: this.state.text}
 };
 this.props.navigator.push(nextroute);
 },
 render () {
 return (
  <view style={[styles.container, {backgroundcolor: "cyan"}]}>
  <textinput style={styles.input} placeholder={"请输入"} onchangetext={this.savetext}/>
  <touchableopacity onpress={this.changepage} style={styles.btn}>
   <text style={styles.btntext}>跳转到下一页</text>
  </touchableopacity>
  </view>
 )
 }
});
var secondpage = react.createclass({
 changepage () {
 this.props.navigator.pop();
 },
 render () {
 return (
  <view style={[styles.container, {backgroundcolor: "yellowgreen"}]}>
  <text>接收到的数据是{this.props.text}</text>
  <touchableopacity onpress={this.changepage} style={styles.btn}>
   <text style={styles.btntext}>返回上一页</text>
  </touchableopacity>
  </view>
 )
 }
});
var nav = react.createclass({
 render () {
 // 初始路由，首页
 var rootroute = {
  component: firstpage,
  nextpass: {}
 };
 return (
  <navigator
  // 第一步需要进行初始路由的设置
  initialroute={rootroute}
  // 第二步设置页面的切换方式
  configurescene={(route) => navigator.sceneconfigs.floatfrombottom}
  // 第三部确定要渲染的场景(页面)
  renderscene={(route, navigator) => {
   // 找到要渲染的页面
   var component = route.component;
   // 渲染时，需要把route和navigator作为属性传递下去，传递的值也作为属性传递
   // ...route.nextpass把route中的nextpass里的数据都传递下去
   return <component {...route.nextpass} text={route.nextpass.text} route={route} navigator={navigator} />
  }}
  />
 )
 }
});
// 实例化样式
var styles = stylesheet.create({
 container: {
 flex: 1,
 justifycontent: "center",
 alignitems: "center",
 },
 btn: {
 backgroundcolor: "#25f30d",
 width: 115,
 height: 30,
 borderradius: 5,
 justifycontent: "center",
 alignitems: "center"
 },
 btntext: {
 fontsize: 14,
 fontweight: "bold"
 },
 input: {
 margin: 30,
 borderwidth: 1,
 bordercolor: "#ccc",
 height: 30,
 backgroundcolor: "#77ccb1"
 }
});
module.exports = nav;

在index.ios.js文件中代码更改如下：

import react, { component } from 'react';
import {
 appregistry,
 view,
} from 'react-native';
var nav = require("./nav");
var navtest = react.createclass({
 render () {
 return (
  <view style={{flex: 1}}>
  <nav></nav>
  </view>
 )
 }
});
appregistry.registercomponent('usecomponent', () => navtest);

最终效果：

tablebarios组件

tablebar是放置在屏幕的最下方会有很多平级的标签图标的标签栏，用户可以击内部不同的图标切换屏幕中显示的视图，tablebarios只适用于ios平台

常用属性

• bartintcolor：标签栏的背景颜色
• tintcolor:当前被选中标签图标的颜色
• unselecteditemtintcolor：当前没有被选中的标签图标的颜色

tabbarios.item

tabbarios.item是每个可以点击标签不图标，根据点击的不同显示不同的视图

常用属性

• title：在图标下面显示的标题文字
• icon：给当前标签指定一个自定义的图标
• onpress：当此标签被选中时调用。你应该修改组件的状态来使得selected={true}
• selected：这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。
  

代码展示：

<tabbarios.item
 title=“movietest”
 icon={require(“./passport.png”)}
 onpress={this.changetab.bind(this, ”movietest”)}
 selected={this.state.selecttab == “movietest”}
>
 <movielist></movielist>
</tabbarios.item>

示例

创建一个tabbar.js文件

代码如下：

import react, { component } from 'react';
import {
 tabbarios
} from 'react-native';
//引入三个选项页面（这里引入的是之前做好的几个组件）
var nav = require("./nav");
var movielist = require("./movielist");
var imagetest = require("./image");
var tabbartest = react.createclass({
 getinitialstate:function () {
  //显示当前显示的标签
  return {
   selecttab: "首页"
  }
 },
 changetab:function (name) {
  this.setstate({
   selecttab:name
  })
 },
 render:function () {
  return (
   <tabbarios bartintcolor="#ccc"
      tintcolor={"red"}
      unselecteditemtintcolor={"cyan"}
   >
    {/*下部的标签栏*/}
    <tabbarios.item
     title="首页"
     icon={require("./images/index.png")}
     onpress={this.changetab.bind(this,"首页")}
     selected={this.state.selecttab == "首页"}
    >
     {/*每一个选项*/}
     <input/>
    </tabbarios.item>
    <tabbarios.item
     title="图片"
     icon={require("./images/picture.png")}
     onpress={this.changetab.bind(this,"图片")}
     selected={this.state.selecttab == "图片"}
    >
     {/*每一个选项*/}
     <imagetest/>
    </tabbarios.item>
    <tabbarios.item
     title="电影"
     icon={require("./images/movie.png")}
     onpress={this.changetab.bind(this,"电影")}
     selected={this.state.selecttab == "电影"}
    >
     {/*每一个选项*/}
     <movielist/>
    </tabbarios.item>
   </tabbarios>
  )
 }
});
module.exports = tabbartest;

在index.ios.js文件中，代码更改为如下：

import react, { component } from 'react';
import {
 appregistry,
 view,
} from 'react-native';
var tabbartest = require("./tabbar");
var tabtest = react.createclass({
 render () {
  return (
   <view style={{flex: 1}}>
   <tabbartest></tabbartest>
   </view>
  )
 }
});
appregistry.registercomponent('usecomponent', () => tabtest);

网络请求

react native提供了和web标准一致的fetch api，用于满足开发者访问网络的需求。与之前学过的ajax很相似。

fetch()第一个参数为请求地址

fetch(‘https://mywebsite.com/mydata.json');

第二个参数可选，可以用来定制http请求一些参数

fetch(‘https://mywebsite.com/endpoint/‘, {
 method: ‘post',
 headers: {
 ‘accept': ‘application/json',
 ‘content-type': ‘application/json',
 },
 body: json.stringify({
 firstparam: ‘yourvalue',
 secondparam: ‘yourothervalue',
 })
})

其中body表示要传输的数据

fetch 方法会返回一个promise，需要对返回的数据进行处理

通过链式结构添加then方法进行成功数据处理

如果有错，通过catch方式捕捉

getdate:function () {
 fetch(url)
  .then((res)=>{
   return res.json();
  })
  .then((resdata)=>{
   this.setstate({
    loaded:true,
    datasource:this.state.datasource.clonewithrows(resdata.data.movies)
   })
  })
  .catch((err)=>{
   alert(err)
  })
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。