前言

本文为大家介绍一下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)
  })
}

总结

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

# react  # native  # 组件  # native常用组件  # 组件库  # React 高阶组件HOC用法归纳  # react组件基本用法示例小结  # React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析  # React-Native中一些常用组件的用法详解(一)  # React组件的用法概述  # 首页  # 创建一个  # 数据处理  # 拖拽  # 第一个  # 链式  # 可以根据  # 第二步  # 再将  # 自己的  # 的是  # 几个  # 如果你  # 会有  # 放在  # 是他  # 下一页  # 上一页  # 适用于  # 第二个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在万网ECS上快速搭建专属网站？  lovemo网页版地址 lovemo官网手机登录  Laravel如何使用Service Container和依赖注入？（代码示例）  大连网站制作公司哪家好一点,大连买房网站哪个好？  微信小程序 require机制详解及实例代码  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  音响网站制作视频教程,隆霸音响官方网站？  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  长沙做网站要多少钱,长沙国安网络怎么样？  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  如何用AI帮你把自己的生活经历写成一个有趣的故事？  js代码实现下拉菜单【推荐】  如何确保西部建站助手FTP传输的安全性？  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  最好的网站制作公司,网购哪个网站口碑最好，推荐几个？谢谢？  安克发布新款氮化镓充电宝：体积缩小 30%，支持 200W 输出  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  如何在Windows 2008云服务器安全搭建网站？  Python文件流缓冲机制_IO性能解析【教程】  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  详解jQuery停止动画——stop()方法的使用  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  如何自定义建站之星网站的导航菜单样式？  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  浅析上传头像示例及其注意事项  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  ,网页ppt怎么弄成自己的ppt？  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  七夕网站制作视频,七夕大促活动怎么报名？  网站优化排名时，需要考虑哪些问题呢？  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  Laravel怎么判断请求类型_Laravel Request isMethod用法  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  如何在阿里云完成域名注册与建站？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？