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

概述前言本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。

前言@H_301_5@

本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。@H_301_5@

ScrollVIEw组件
@H_301_5@

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

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

常用方法@H_301_5@ onScrollBeginDrag:开始拖拽的时候; onScrollEndDrag：结束拖拽的时候; onMomentumScrollBegin：开始滑动; onMomentumScrollEnd：开始滑动;

特殊组件@H_301_5@ RefreshControl 以用在ScrollVIEw或ListVIEw内部，为其添加下拉刷新的功能。 当ScrollVIEw处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

示例@H_301_5@

创建一个scroll.Js文件
@H_301_5@

代码如下：@H_301_5@

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文件改成如下：@H_301_5@

import React,{ Component } from 'react';import { AppRegistry,} from 'react-native';var Scroll = require("./scroll");var ScrollTest = React.createClass({ render () { return (  <VIEw>  <Scroll></Scroll>  </VIEw> ) }});AppRegistry.registerComponent('useComponent',() => ScrollTest);

最终效果：@H_301_5@

@H_301_5@@H_301_5@

ListVIEw组件
@H_301_5@

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

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

数据处理@H_301_5@

ListVIEw.DataSource为ListVIEw组件提供高性能的数据处理和访问。
@H_301_5@

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

DataSource初始化：@H_301_5@

getinitialState:function () {// 实例化DataSource对象 var ds = new ListVIEw.DataSource({ rowHasChanged:(oldData,newData) => oldData !== newData }); return { data:ds.cloneWithRows(news) }}

常用属性@H_301_5@ 设置数据源：dataSource={this.state.dataSource} 设置列表组件：renderRow={this._renderRow} 设置ListVIEw头部：renderheader={this._renderheader} 设置列表项之间的间隔：renderSeparator={this._renderSeparator}

示例 制作一个电影列表@H_301_5@

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

这里创建一个movIEList.Js的文件
@H_301_5@

代码如下：@H_301_5@

import React,Text,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,lineHeight: 44 },separator: { height: 1,backgroundcolor: "#ccc" }});module.exports = ListMovIE;

再将index.ios.Js文件改成如下：@H_301_5@

import React,} from 'react-native';var ListMovIE = require("./ListMovIE");var MovIE = React.createClass({ render () { return (  <VIEw>  <ListMovIE></ListMovIE>  </VIEw> ) }});AppRegistry.registerComponent('useComponent',() => MovIE);

最终效果：@H_301_5@

@H_301_5@@H_301_5@

Navigator组件
@H_301_5@

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

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

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

导航器的设置步骤@H_301_5@

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

第二步：configureScene：配置场景动画和手势；
@H_301_5@

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

代码展示：@H_301_5@

<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}/>  ) } }/>

示例@H_301_5@

创建一个nav.Js文件
@H_301_5@

代码如下：@H_301_5@

/** * Created by lanou on 17/4/13. */import React,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(); },{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",},btn: { backgroundcolor: "#25f30d",wIDth: 115,height: 30,borderRadius: 5,btnText: { FontSize: 14,FontWeight: "bold" },input: { margin: 30,bordercolor: "#ccc",backgroundcolor: "#77ccb1" }});module.exports = Nav;

在index.ios.Js文件中代码更改如下：@H_301_5@

import React,} from 'react-native';var Nav = require("./nav");var NavTest = React.createClass({ render () { return (  <VIEw style={{flex: 1}}>  <Nav></Nav>  </VIEw> ) }});AppRegistry.registerComponent('useComponent',() => NavTest);

最终效果：@H_301_5@

@H_301_5@@H_301_5@

tablebarIOS组件
@H_301_5@

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

常用属性@H_301_5@ barTintcolor：标签栏的背景颜色 tintcolor:当前被选中标签图标的颜色 unselectedItemTintcolor：当前没有被选中的标签图标的颜色

TabbarIOS.Item@H_301_5@

TabbarIOS.Item是每个可以点击标签不图标，根据点击的不同显示不同的视图@H_301_5@

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

代码展示：@H_301_5@

<TabbarIOS.Item Title=“movIETest” icon={require(“./passport.png”)} onPress={this.changeTab.bind(this,”movIETest”)} selected={this.state.selectTab == “movIETest”}> <MovIEList></MovIEList></TabbarIOS.Item>

示例@H_301_5@

创建一个tabbar.Js文件
@H_301_5@

代码如下：@H_301_5@

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文件中，代码更改为如下：@H_301_5@

import React,} from 'react-native';var TabbarTest = require("./tabbar");var TabTest = React.createClass({ render () {  return (   <VIEw style={{flex: 1}}>   <TabbarTest></TabbarTest>   </VIEw>  ) }});AppRegistry.registerComponent('useComponent',() => TabTest);

网络请求
@H_301_5@

React Native提供了和WEB标准一致的Fetch API，用于满足开发者访问网络的需求。与之前学过的AJAX很相似。
@H_301_5@

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

fetch(‘https://mywebsite.com/mydata.Json');
@H_301_5@

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

fetch(‘https://mywebsite.com/endpoint/‘,{ method: ‘POST',headers: { ‘Accept': ‘application/Json',‘Content-Type': ‘application/Json',body: JsON.stringify({ firstParam: ‘yourValue',secondParam: ‘yourOtherValue',})})

其中body表示要传输的数据
@H_301_5@

Fetch 方法会返回一个Promise，需要对返回的数据进行处理
@H_301_5@

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

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

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)  })}

总结@H_301_5@

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

以上是内存溢出为你收集整理的React-Native中一些常用组件的用法详解(二)全部内容，希望文章能够帮你解决React-Native中一些常用组件的用法详解(二)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。