React-Native中一些常用組件的用法詳解(二)

更新時(shí)間：2017年06月26日 10:40:07 作者：lymooz

這篇文章主要跟大家介紹了關(guān)于React-Native中一些常用組件的用法的相關(guān)資料，其中詳細(xì)介紹了關(guān)于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡(luò)請(qǐng)求等相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

前言

本文為大家介紹一下React-Native中一些深入些的組件，由于對(duì)ES6的語(yǔ)法并沒(méi)有完全掌握，這里暫時(shí)用ES5和ES6混用的語(yǔ)法。

ScrollView組件

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

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

常用方法

onScrollBeginDrag:開(kāi)始拖拽的時(shí)候;
onScrollEndDrag：結(jié)束拖拽的時(shí)候;
onMomentumScrollBegin：開(kāi)始滑動(dòng);
onMomentumScrollEnd：開(kāi)始滑動(dòng);

特殊組件

RefreshControl 以用在ScrollView或ListView內(nèi)部，為其添加下拉刷新的功能。
當(dāng)ScrollView處于豎直方向的起點(diǎn)位置（scrollY: 0），此時(shí)下拉會(huì)觸發(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 () {
 // 這里是開(kāi)始拖拽的函數(shù)
 },
 _onScrollEndDrag () {
 // 這里是拖拽結(jié)束的函數(shù)
 },
 _onMomentumScrollBegin () {
 // 這里是開(kāi)始滾動(dòng)的函數(shù)
 },
 _onMomentumScrollEnd () {
 // 這里是滾動(dòng)結(jié)束的函數(shù)
 },
 _refresh () {
 // 這里是請(qǐng)求數(shù)據(jù)的函數(shù)
 alert("正在請(qǐng)求數(shù)據(jù)");
 },
 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>
 )
 }
});
// 實(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 (
  <View>
  <Scroll></Scroll>
  </View>
 )
 }
});
AppRegistry.registerComponent('useComponent', () => ScrollTest);

最終效果：

ListView組件

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

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

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

ListView.DataSource為L(zhǎng)istView組件提供高性能的數(shù)據(jù)處理和訪問(wèn)。

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

DataSource初始化：

getInitialState:function () {
// 實(shí)例化DataSource對(duì)象
 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';
// 通過(guò)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 (
  <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}>導(dǎo)演：{movie.dir}</Text>
   <Text style={styles.dir}>上映時(shí)間：{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}
  />
 }
});
// 實(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 (
  <View>
  <ListMovie></ListMovie>
  </View>
 )
 }
});
AppRegistry.registerComponent('useComponent', () => Movie);

最終效果：

Navigator組件

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

不過(guò)導(dǎo)航器頁(yè)面的跳轉(zhuǎn)需要通過(guò)路由對(duì)象來(lái)分辨不同的場(chǎng)景。

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

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

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

第二步：configureScene：配置場(chǎng)景動(dòng)畫(huà)和手勢(shì)；

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

代碼展示：

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

示例

創(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)成一些頁(yè)面，使用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 (
  <View style={[styles.container, {backgroundColor: "cyan"}]}>
  <TextInput style={styles.input} placeholder={"請(qǐng)輸入"} onChangeText={this.saveText}/>
  <TouchableOpacity onPress={this.changePage} style={styles.btn}>
   <Text style={styles.btnText}>跳轉(zhuǎn)到下一頁(yè)</Text>
  </TouchableOpacity>
  </View>
 )
 }
});
var SecondPage = React.createClass({
 changePage () {
 this.props.navigator.pop();
 },
 render () {
 return (
  <View style={[styles.container, {backgroundColor: "yellowgreen"}]}>
  <Text>接收到的數(shù)據(jù)是{this.props.text}</Text>
  <TouchableOpacity onPress={this.changePage} style={styles.btn}>
   <Text style={styles.btnText}>返回上一頁(yè)</Text>
  </TouchableOpacity>
  </View>
 )
 }
});
var Nav = React.createClass({
 render () {
 // 初始路由，首頁(yè)
 var rootRoute = {
  component: FirstPage,
  nextPass: {}
 };
 return (
  <Navigator
  // 第一步需要進(jìn)行初始路由的設(shè)置
  initialRoute={rootRoute}
  // 第二步設(shè)置頁(yè)面的切換方式
  configureScene={(route) => Navigator.SceneConfigs.FloatFromBottom}
  // 第三部確定要渲染的場(chǎng)景(頁(yè)面)
  renderScene={(route, navigator) => {
   // 找到要渲染的頁(yè)面
   var Component = route.component;
   // 渲染時(shí)，需要把route和Navigator作為屬性傳遞下去，傳遞的值也作為屬性傳遞
   // ...route.nextPass把route中的nextPass里的數(shù)據(jù)都傳遞下去
   return <Component {...route.nextPass} text={route.nextPass.text} route={route} navigator={navigator} />
  }}
  />
 )
 }
});
// 實(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 (
  <View style={{flex: 1}}>
  <Nav></Nav>
  </View>
 )
 }
});
AppRegistry.registerComponent('useComponent', () => NavTest);

最終效果：

TableBarIOS組件

TableBar是放置在屏幕的最下方會(huì)有很多平級(jí)的標(biāo)簽圖標(biāo)的標(biāo)簽欄，用戶可以擊內(nèi)部不同的圖標(biāo)切換屏幕中顯示的視圖，TableBarIOS只適用于IOS平臺(tái)

常用屬性

barTintColor：標(biāo)簽欄的背景顏色
tintColor:當(dāng)前被選中標(biāo)簽圖標(biāo)的顏色
unselectedItemTintColor：當(dāng)前沒(méi)有被選中的標(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)來(lái)使得selected={true}
selected：這個(gè)屬性決定了子視圖是否可見(jiàn)。如果你看到一個(gè)空白的頁(yè)面，很可能是沒(méi)有選中任何一個(gè)標(biāo)簽。

代碼展示：

<TabBarIOS.Item
 title=“movieTest”
 icon={require(“./passport.png”)}
 onPress={this.changeTab.bind(this, ”movieTest”)}
 selected={this.state.selectTab == “movieTest”}
>
 <MovieList></MovieList>
</TabBarIOS.Item>

示例

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

代碼如下：

import React, { Component } from 'react';
import {
 TabBarIOS
} from 'react-native';
//引入三個(gè)選項(xiàng)頁(yè)面（這里引入的是之前做好的幾個(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: "首頁(yè)"
  }
 },
 changeTab:function (name) {
  this.setState({
   selectTab:name
  })
 },
 render:function () {
  return (
   <TabBarIOS barTintColor="#ccc"
      tintColor={"red"}
      unselectedItemTintColor={"cyan"}
   >
    {/*下部的標(biāo)簽欄*/}
    <TabBarIOS.Item
     title="首頁(yè)"
     icon={require("./images/index.png")}
     onPress={this.changeTab.bind(this,"首頁(yè)")}
     selected={this.state.selectTab == "首頁(yè)"}
    >
     {/*每一個(gè)選項(xiàng)*/}
     <Input/>
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="圖片"
     icon={require("./images/picture.png")}
     onPress={this.changeTab.bind(this,"圖片")}
     selected={this.state.selectTab == "圖片"}
    >
     {/*每一個(gè)選項(xiàng)*/}
     <ImageTest/>
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="電影"
     icon={require("./images/movie.png")}
     onPress={this.changeTab.bind(this,"電影")}
     selected={this.state.selectTab == "電影"}
    >
     {/*每一個(gè)選項(xiàng)*/}
     <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);

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

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

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

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

第二個(gè)參數(shù)可選，可以用來(lái)定制HTTP請(qǐng)求一些參數(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 方法會(huì)返回一個(gè)Promise，需要對(duì)返回的數(shù)據(jù)進(jìn)行處理

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

如果有錯(cuò)，通過(guò)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)
  })
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: