React-Native中有哪些常用的组件

本篇文章给大家分享的是有关React-Native中有哪些常用的组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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文件

代码如下：

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

以上就是React-Native中有哪些常用的组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。