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

本篇文章给大家分享的是有关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);

最终效果:

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

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 
 }
});
// 实例化样式
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 (
  
  
  
 )
 }
});
AppRegistry.registerComponent('useComponent', () => Movie);

最终效果:

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

Navigator组件

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

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

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

导航器的设置步骤

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

第二步:configureScene:配置场景动画和手势;

第三步:renderScene;渲染场景,参数route(第一步创建并设置的导航器路由对象),navigator(导航器对象)

代码展示:

Navigator.SceneConfigs.PushFromRight}
 renderScene={
 (route,navigator)=>{
  var MySceneComponent = route.component;
  console.log(MySceneComponent);
  console.log(“aaaa”);
  return (
  
  )
 }
 }
/>

示例

创建一个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 (
  
  
  
   跳转到下一页
  
  
 )
 }
});
var SecondPage = React.createClass({
 changePage () {
 this.props.navigator.pop();
 },
 render () {
 return (
  
  接收到的数据是{this.props.text}
  
   返回上一页
  
  
 )
 }
});
var Nav = React.createClass({
 render () {
 // 初始路由,首页
 var rootRoute = {
  component: FirstPage,
  nextPass: {}
 };
 return (
   Navigator.SceneConfigs.FloatFromBottom}
  // 第三部确定要渲染的场景(页面)
  renderScene={(route, navigator) => {
   // 找到要渲染的页面
   var Component = route.component;
   // 渲染时,需要把route和Navigator作为属性传递下去,传递的值也作为属性传递
   // ...route.nextPass把route中的nextPass里的数据都传递下去
   return 
  }}
  />
 )
 }
});
// 实例化样式
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 (
  
  
  
 )
 }
});
AppRegistry.registerComponent('useComponent', () => NavTest);

TableBarIOS组件

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

常用属性

  • barTintColor:标签栏的背景颜色

  • tintColor:当前被选中标签图标的颜色

  • unselectedItemTintColor:当前没有被选中的标签图标的颜色

TabBarIOS.Item

TabBarIOS.Item是每个可以点击标签不图标,根据点击的不同显示不同的视图

常用属性

  • title:在图标下面显示的标题文字

  • icon:给当前标签指定一个自定义的图标

  • onPress:当此标签被选中时调用。你应该修改组件的状态来使得selected={true}

  • selected:这个属性决定了子视图是否可见。如果你看到一个空白的页面,很可能是没有选中任何一个标签。

代码展示:


 

示例

创建一个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 (
   
    {/*下部的标签栏*/}
    
     {/*每一个选项*/}
     
    
    
     {/*每一个选项*/}
     
    
    
     {/*每一个选项*/}
     
    
   
  )
 }
});
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 (
   
   
   
  )
 }
});
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中有哪些常用的组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


本文名称:React-Native中有哪些常用的组件
文章分享:http://pwwzsj.com/article/ggdijo.html