React-Native中一些组件的用法(二)

个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客

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

原文链接