React Native中常用的组件-下

2019-11-02 本文已影响0人撩课学院

一、ScrollView组件

从iOS开发的经验来看，scrollView无疑是移动开发中很重要的一个组件，比如后面会学到的FlatList就是继承自它。那么，在开发中比如：焦点图、引导页等地方都有其的影子，那接下来我们一起来搞定它！

一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

1）两个要点

ScrollView必须有一个确定的高度才能正常工作
它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
通常有两种做法：
第一种：直接给该ScrollView进行设置高度(不建议)；
第二种：ScrollView中不要加{flex:1}。
ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者

2）ScrollView中常用的属性

contentContainerStyle
这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。
horizontal bool
当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
onScroll function
在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
showsHorizontalScrollIndicator bool
当此属性为true的时候，显示一个水平方向的滚动条。
showsVerticalScrollIndicator bool
当此属性为true的时候，显示一个垂直方向的滚动条。
alwaysBounceHorizontal bool
当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为true，否则为false。
alwaysBounceVertical bool
当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为false，否则为true。
contentInset {top: number, left: number, bottom: number, right: number}
内容范围相对滚动视图边缘的坐标。默认为{0, 0, 0, 0}。
contentOffset
用来手动设置初始的滚动坐标。默认值为{x: 0, y: 0}。
decelerationRate number
一个浮点数，用于决定当用户抬起手指之后，滚动视图减速停下的速度。常见的选项有：

Normal: 0.998 (默认值)
Fast: 0.9

directionalLockEnabled bool
当值为真时，滚动视图在拖拽的时候会锁定只有垂直或水平方向可以滚动。默认值为false。
maximumZoomScale number
允许的最大缩放比例。默认值为1.0。
minimumZoomScale number
允许的最小缩放比例。默认值为1.0。

(更多请参照官方文档)

3）ScrollView常用操作

import React, {Component} from 'react';
import {View, ScrollView, StyleSheet, Dimensions} from 'react-native';


const screenW = Dimensions.get('window').width;

export default class LKScrollView extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <ScrollView
                // 决定子视图是横着还是竖着 默认false
                horizontal={true}
                style={styles.container}
                // 是否显示水平滚动条
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                // 是否采用分页
                pagingEnabled={true}
                // 是否可以滚动
                scrollEnabled={true}
            >
                {this._renderItem()}
            </ScrollView>
        );
    }

    _renderItem(){
        // 1. 颜色数组
        let colorArr = ['red', 'green', 'blue', 'yellow', 'purple'];
        // 2. 组件数组
        let itemArr = [];

        // 3. 遍历颜色数组,创建视图装入组件数组
        for(let i=0; i<colorArr.length; i++){
            itemArr.push(
                <View
                    style={{
                        width:screenW,
                        height:300,
                        backgroundColor:colorArr[i]
                    }}
                    key = {i}
                />
            )
        }

        // 4. 返回数组
        return itemArr;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    }
});

二、RefreshControl组件

这一组件可以用在ScrollView或FlatList内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

1）属性方法

onRefresh function 在视图开始刷新的时候调用
refreshing bool 视图是否在刷新时显示指示器，也表明当前是否在刷新中
colors [ColorPropType] android平台适用进行设置加载进去指示器的颜色，至少设置一种，最多可以设置4种
enabled bool android平台适用用来设置下拉刷新功能是否可用
progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色
size RefreshLayoutConsts.SIZE.DEFAULT android平台适用加载进度指示器的尺寸大小
tintColor ColorPropType iOS平台适用设置加载进度指示器的颜色
title string iOS平台适用设置加载进度指示器下面的标题文本信息

2) 代码实操

案例效果图

 render() {
        const rows = this.state.rowData.map((row, i)=>(<Row data={row} key={i}/>));
        return (
            <ScrollView
                style={styles.container}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={()=>this._onRefresh()}
                        tintColor="#0000ff"
                        title="正在加载数据..."
                        titleColor="#0000ff"
                        colors={['#ff0000', '#00ff00', '#0000ff']}
                        progressBackgroundColor="#ffff00"
                    />
                }
            >
                {rows}
            </ScrollView>
        );

    }

三、FlatList组件

高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
支持多列布局。

如果需要分组/类/区（section），请使用<SectionList>

1）简单使用

import React, {Component} from 'react';
import {View, FlatList, StyleSheet, Text, TouchableOpacity} from 'react-native';

export default class LKImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataArr: ['第一行数据','第二行数据','第三行数据','第四行数据','第五行数据']
        };
    }

    render() {
        return (
            <FlatList
                data={this.state.dataArr}
                renderItem={({item, index}) => this._renderRow(item, index)}
                keyExtractor={(item, index) => String(index)}
            />
        );
    }

    _renderRow(rowData,index){
        return(
            <TouchableOpacity
                style={{height:44}}
                onPress={()=>alert('点击了第'+ (index+1) + '行')}
            >
                <Text>{rowData}</Text>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({});

2）案例实操-1

最终效果图

核心代码

_renderRow(rowData, rowID) {
        return (
            <TouchableOpacity
                style={styles.cellStyle}
                onPress={()=>alert('点击了第' + rowID + '行')}
            >
                {/*左边*/}
                <Image source={{uri: rowData.image}} style={styles.leftImgStyle}/>
                {/*右边*/}
                <View style={styles.rightViewStyle}>
                    <Text
                        numberOfLines={2}
                        style={{fontSize:18}}
                    >
                        {rowData.name}
                    </Text>
                    <Text style={{color:'red'}}>¥{rowData.money}</Text>
                </View>
            </TouchableOpacity>
        )
    }

3）案例实操-2

分组案例实操

核心代码

 _renderRow(rowData, index) {
        console.log(rowData);
        return (
            <View style={styles.cellStyle} key={index}>
                <Image source={{uri: rowData.icon}} style={styles.imgStyle}/>
                <Text>{rowData.name}</Text>
            </View>
        )
    }

    _renderSectionHeader(sectionData) {
        return (
            <View style={styles.sectionHeaderStyle}>
                <Text>{sectionData}</Text>
            </View>
        )
    }