13518219792
本篇文章给大家分享的是有关React-Native中有哪些常用的组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联建站从2013年创立，先为西乡等服务建站，西乡等地企业，进行企业商务咨询服务。为西乡企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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 (
}>
)
}
});
// 实例化样式
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 (
)
}
});
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 (
{movie.nm}
导演：{movie.dir}
上映时间：{movie.rt}
)
},
_renderHeader () {
return (
猫眼热门电影
)
},
_renderSeparator () {
return
},
render () {
return 再将index.ios.js文件改成如下：
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
var ListMovie = require("./listMovie");
var Movie = React.createClass({
render () {
return (
)
}
});
AppRegistry.registerComponent('useComponent', () => Movie);最终效果：
Navigator组件
使用导航器可以让你在应用的不同场景（页面）间进行切换。其实质上类似于HTML里导航条功能。
不过导航器页面的跳转需要通过路由对象来分辨不同的场景。
利用renderScene方法，导航栏可以根据指定的路由来渲染场景。
导航器的设置步骤
第一步：设置属性initialRoute：初始化route对象，指定默认页面，也就是启动app之后所看到的第一个页面；
第二步：configureScene：配置场景动画和手势；
第三步：renderScene；渲染场景，参数route（第一步创建并设置的导航器路由对象），navigator（导航器对象）
代码展示：
