本篇文章給大家分享的是有關(guān)React-Native中有哪些常用的組件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為西鄉(xiāng)等服務(wù)建站，西鄉(xiāng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為西鄉(xiāng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

ScrollView組件

能夠調(diào)用移動平臺的ScrollView（滾動視圖）的組件，同時(shí)還集成了觸摸鎖定的“響應(yīng)者”系統(tǒng)。

注意一定要給scrollview一個(gè)高度，或者是他父級的高度。

常用方法

• onScrollBeginDrag:開始拖拽的時(shí)候;

• onScrollEndDrag：結(jié)束拖拽的時(shí)候;

• onMomentumScrollBegin：開始滑動;

• onMomentumScrollEnd：開始滑動;

特殊組件

• RefreshControl 以用在ScrollView或ListView內(nèi)部，為其添加下拉刷新的功能。

• 當(dāng)ScrollView處于豎直方向的起點(diǎn)位置（scrollY: 0），此時(shí)下拉會觸發(fā)一個(gè)onRefresh事件。

示例

創(chuàng)建一個(gè)scroll.js文件

代碼如下：

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 ScrollView,
 RefreshControl
} from 'react-native';
var dataSource = require("./data.json");
// 創(chuàng)建組件
var ScrollTest = React.createClass({
 // 下面的幾種函數(shù)可以根據(jù)自己的需求添加
 _onScrollBeginDrag () {
 // 這里是開始拖拽的函數(shù)
 },
 _onScrollEndDrag () {
 // 這里是拖拽結(jié)束的函數(shù)
 },
 _onMomentumScrollBegin () {
 // 這里是開始滾動的函數(shù)
 },
 _onMomentumScrollEnd () {
 // 這里是滾動結(jié)束的函數(shù)
 },
 _refresh () {
 // 這里是請求數(shù)據(jù)的函數(shù)
 alert("正在請求數(shù)據(jù)");
 },
 render () {
 return (
  
   }>
  
  
  
  
 )
 }
});
// 實(shí)例化樣式
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組件

用于高效地顯示一個(gè)可以垂直滾動的變化的數(shù)據(jù)列表。

最基本的使用方式就是創(chuàng)建一個(gè)ListView.DataSource數(shù)據(jù)源，然后給它傳遞一個(gè)普通的數(shù)據(jù)數(shù)組，再使用數(shù)據(jù)源來實(shí)例化一個(gè)ListView組件，并且定義它的renderRow回調(diào)函數(shù)，這個(gè)函數(shù)會接受數(shù)組中的每個(gè)數(shù)據(jù)作為參數(shù)，返回一個(gè)可渲染的組件（作為listview的每一行）。

數(shù)據(jù)處理

ListView.DataSource為ListView組件提供高性能的數(shù)據(jù)處理和訪問。

我們需要調(diào)用方法從原始輸入數(shù)據(jù)中抽取數(shù)據(jù)來創(chuàng)建ListViewDataSource對象，并用其進(jìn)行數(shù)據(jù)變更的比較。

DataSource初始化：

getInitialState:function () {
// 實(shí)例化DataSource對象
 var ds = new ListView.DataSource({
 rowHasChanged:(oldData,newData) => oldData !== newData
 });
 return {
 data:ds.cloneWithRows(news)
 }
}

常用屬性

• 設(shè)置數(shù)據(jù)源：dataSource={this.state.dataSource}

• 設(shè)置列表組件：renderRow={this._renderRow}

• 設(shè)置ListView頭部：renderHeader={this._renderHeader}

• 設(shè)置列表項(xiàng)之間的間隔：renderSeparator={this._renderSeparator}

示例 制作一個(gè)電影列表

博主先前從貓眼電影里獲取了一些電影介紹的json文件，有興趣的同學(xué)可以去貓眼電影列表獲取一些信息，注意這里需要json格式轉(zhuǎn)換一下！

這里創(chuàng)建一個(gè)movieList.js的文件

代碼如下：

import React, { Component } from 'react';
import {
 StyleSheet,
 Text,
 View,
 Image,
 ListView
} from 'react-native';
// 通過ListView實(shí)現(xiàn)電影列表
var movies = require("./data.json").data.movies;
// 創(chuàng)建組件
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}
   導(dǎo)演：{movie.dir}
   上映時(shí)間：{movie.rt}
  
  
 )
 },
 _renderHeader () {
 return (
  
  貓眼熱門電影
  
  
 )
 },
 _renderSeparator () {
 return 
 },
 render () {
 return 
 }
});
// 實(shí)例化樣式
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);

最終效果：

Navigator組件

使用導(dǎo)航器可以讓你在應(yīng)用的不同場景（頁面）間進(jìn)行切換。其實(shí)質(zhì)上類似于HTML里導(dǎo)航條功能。

不過導(dǎo)航器頁面的跳轉(zhuǎn)需要通過路由對象來分辨不同的場景。

利用renderScene方法，導(dǎo)航欄可以根據(jù)指定的路由來渲染場景。

導(dǎo)航器的設(shè)置步驟

第一步：設(shè)置屬性initialRoute：初始化route對象，指定默認(rèn)頁面，也就是啟動app之后所看到的第一個(gè)頁面；

第二步：configureScene：配置場景動畫和手勢；

第三步：renderScene；渲染場景，參數(shù)route（第一步創(chuàng)建并設(shè)置的導(dǎo)航器路由對象），navigator（導(dǎo)航器對象）

代碼展示：

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

示例

創(chuàng)建一個(gè)nav.js文件

代碼如下：

/**
 * Created by lanou on 17/4/13.
 */
import React, { Component } from 'react';
import {
 StyleSheet,
 Text,
 View,
 Navigator,
 TouchableOpacity,
 TextInput
} from 'react-native';
// 在進(jìn)行導(dǎo)航時(shí)，需要先構(gòu)成一些頁面，使用Navigator
// 創(chuàng)建組件
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 (
  
  
  
   跳轉(zhuǎn)到下一頁
  
  
 )
 }
});
var SecondPage = React.createClass({
 changePage () {
 this.props.navigator.pop();
 },
 render () {
 return (
  
  接收到的數(shù)據(jù)是{this.props.text}
  
   返回上一頁
  
  
 )
 }
});
var Nav = React.createClass({
 render () {
 // 初始路由，首頁
 var rootRoute = {
  component: FirstPage,
  nextPass: {}
 };
 return (
   Navigator.SceneConfigs.FloatFromBottom}
  // 第三部確定要渲染的場景(頁面)
  renderScene={(route, navigator) => {
   // 找到要渲染的頁面
   var Component = route.component;
   // 渲染時(shí)，需要把route和Navigator作為屬性傳遞下去，傳遞的值也作為屬性傳遞
   // ...route.nextPass把route中的nextPass里的數(shù)據(jù)都傳遞下去
   return 
  }}
  />
 )
 }
});
// 實(shí)例化樣式
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是放置在屏幕的最下方會有很多平級的標(biāo)簽圖標(biāo)的標(biāo)簽欄，用戶可以擊內(nèi)部不同的圖標(biāo)切換屏幕中顯示的視圖，TableBarIOS只適用于IOS平臺

常用屬性

• barTintColor：標(biāo)簽欄的背景顏色

• tintColor:當(dāng)前被選中標(biāo)簽圖標(biāo)的顏色

• unselectedItemTintColor：當(dāng)前沒有被選中的標(biāo)簽圖標(biāo)的顏色

TabBarIOS.Item

TabBarIOS.Item是每個(gè)可以點(diǎn)擊標(biāo)簽不圖標(biāo)，根據(jù)點(diǎn)擊的不同顯示不同的視圖

常用屬性

• title：在圖標(biāo)下面顯示的標(biāo)題文字

• icon：給當(dāng)前標(biāo)簽指定一個(gè)自定義的圖標(biāo)

• onPress：當(dāng)此標(biāo)簽被選中時(shí)調(diào)用。你應(yīng)該修改組件的狀態(tài)來使得selected={true}

• selected：這個(gè)屬性決定了子視圖是否可見。如果你看到一個(gè)空白的頁面，很可能是沒有選中任何一個(gè)標(biāo)簽。

代碼展示：

示例

創(chuàng)建一個(gè)tabBar.js文件

代碼如下：

import React, { Component } from 'react';
import {
 TabBarIOS
} from 'react-native';
//引入三個(gè)選項(xiàng)頁面（這里引入的是之前做好的幾個(gè)組件）
var Nav = require("./nav");
var MovieList = require("./movieList");
var ImageTest = require("./image");
var TabBarTest = React.createClass({
 getInitialState:function () {
  //顯示當(dāng)前顯示的標(biāo)簽
  return {
   selectTab: "首頁"
  }
 },
 changeTab:function (name) {
  this.setState({
   selectTab:name
  })
 },
 render:function () {
  return (
   
    {/*下部的標(biāo)簽欄*/}
    
     {/*每一個(gè)選項(xiàng)*/}
     
    
    
     {/*每一個(gè)選項(xiàng)*/}
     
    
    
     {/*每一個(gè)選項(xiàng)*/}
     
    
   
  )
 }
});
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);

網(wǎng)絡(luò)請求

React Native提供了和web標(biāo)準(zhǔn)一致的Fetch API，用于滿足開發(fā)者訪問網(wǎng)絡(luò)的需求。與之前學(xué)過的AJAX很相似。

fetch()第一個(gè)參數(shù)為請求地址

fetch(‘https://mywebsite.com/mydata.json');

第二個(gè)參數(shù)可選，可以用來定制HTTP請求一些參數(shù)

fetch(‘https://mywebsite.com/endpoint/‘, {
 method: ‘POST',
 headers: {
 ‘Accept': ‘a(chǎn)pplication/json',
 ‘Content-Type': ‘a(chǎn)pplication/json',
 },
 body: JSON.stringify({
 firstParam: ‘yourValue',
 secondParam: ‘yourOtherValue',
 })
})

其中body表示要傳輸?shù)臄?shù)據(jù)

Fetch 方法會返回一個(gè)Promise，需要對返回的數(shù)據(jù)進(jìn)行處理

通過鏈?zhǔn)浇Y(jié)構(gòu)添加then方法進(jìn)行成功數(shù)據(jù)處理

如果有錯(cuò)，通過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中有哪些常用的組件，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。