React Native中常用的组件-中

一、TextInput

文本输入框，相当于OC中的UITextField，在用法和属性方面，两者都有很大的借鉴之处：通过键盘将文本输入到应用程序的一个基本的组件。

本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

常用属性

​value 字符串型

文本输入的默认值

onChangeText 函数

监听输入框中输入的值

keyboardType 键盘类型

决定弹出何种软键盘类型，譬如numeric。

所有平台都可用：default , number-pad，decimal-pad，numeric，email-address， phone-pad；

仅iOS可用：ascii-capable，numbers-and-punctuation，url，name-phone-pad，twitter，web-search；

仅Android平台可用：visible-password

multiline 布尔型

如果值为真，文本输入可以输入多行。默认值为假。

placeholder 字符串型

在文本输入之前字符串将被呈现出来，通常被称为占位文字

placeholderTextColor 字符串型

占位符字符串的文本颜色

autoCapitalize

控制TextInput是否要自动将特定字符切换为大写，取值：

• characters：所有字符，
• words：每一个单词的首字母
• sentences：每个句子的首字母（默认情况下）
• none：不会自动使用任何东西

clearButtonMode
enum('never', 'while-editing', 'unless-editing', 'always')

清除按钮出现在文本视图右侧的时机，仅在单行模式下可用

editable 布尔型

如果值为假，文本是不可编辑的。默认值为真。

onBlur 函数

当文本框失去焦点的时候调用此回调函数

onChangeText 函数

当文本输入的文本发生变化时，调用回调函数

onFocus 函数

当输入的文本是聚焦状态时，调用回调函数

returnKeyType
enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')

决定返回键的样式

二、Touchable系列组件

1）高亮触摸 TouchableHighlight

当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。

• 常用属性：

activeOpacity number
设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)

onHideUnderlay function 方法
当底层被隐藏的时候调用

onShowUnderlay function 方法
当底层显示的时候调用

style
可以设置控件的风格演示，该风格演示可以参考View组件的style

underlayColor
当触摸或者点击控件的时候显示出的颜色

2）不透明触摸 TouchableOpacity

该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。

• 常用属性：

activeOpacity number
设置当用户触摸的时候，组件的透明度

• 代码实操

render() {
        return (
            <View>
                <TouchableOpacity
                    style={{width: 100, height: 60, backgroundColor:'red'}}
                    activeOpacity={0.5}
                    onPress={()=>this.activeEvent('点击')}
                    onPressIn={()=>this.activeEvent('按下')}
                    onPressOut={()=>this.activeEvent('抬起')}
                    onLongPress={()=>this.activeEvent('长按')}
                >
                    <Text>按下</Text>
                </TouchableOpacity>

                <Text>{this.state.eventTag}</Text>
            </View>
        );
    }

    activeEvent(tag){
        this.setState({
            eventTag: tag
        })
    }

三、按钮

一个简单的跨平台的按钮组件。可以进行一些简单的定制。

<Button
  onPress={()=>this.onBtnClick()}
  title="我是一个按钮"
  color="#841584"
  />

四、案例实操

1）案例主要技术点：充分利用了RN生命周期的钩子函数，实现界面刷新。

• 利用控件的索引index计算出控件所在的行号和列号
• 利用列号计算控件的x值
• 利用行号计算控件的y值

2）案例思路截图

案例思路截图

3）案例效果图

案例效果图

4）案例核心代码

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

const {width, height} = Dimensions.get('window');

// 获取本地数据
const dataArr = require('./localData/packageData.json');

export default class LKFlexView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            // 购物车数组
            shopArr: []
        };
    }

    render() {
        return (
            <View style={styles.container}>
                {/*上部分*/}
                <View style={styles.topViewStyle}>
                    <TouchableOpacity style={styles.clickBtnStyle} onPress={()=>this._addShop()}>
                        <Text style={styles.btnTextStyle}>添加商品</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.clickBtnStyle, {backgroundColor:'red'}]}  onPress={()=>this._removeShop()}>
                        <Text style={styles.btnTextStyle}>删除商品</Text>
                    </TouchableOpacity>
                </View>
                {/*下部分*/}
                <View style={styles.bottomViewStyle}>
                    {this.state.shopArr}
                </View>
            </View >
        );
    }

    /**
     * 添加商品
     */
    _addShop() {
        // 1. 定义相关的常量(总列数, 商品的宽度\高度)
        const cols = 3, shopW = 100, shopH = 120;

        // 2. 取出下标
        let index = this.state.shopArr.length;
        if(index >= 9){
            alert('你已经败家够了!!');
            return;
        }

        // 3. 求出当前盒子所在的行数和列数
        let row = parseInt(index / cols);
        let col = parseInt(index % cols);

        // 4. 求出当前盒子的left和top
        let xSpace = (0.9 * width - cols * shopW) / (cols - 1);
        let ySpace = (0.7 * height - 3 * shopH) / 2;

        let left = col * (shopW + xSpace);
        let top = row * (shopH + ySpace);

        // 5. 创建组件装入数组
        let shopView = (
            <View style={{
                    position:'absolute',
                    left: left,
                    top: top,
                    justifyContent:'center',
                    alignItems:'center'
                  }}
                  key={index}
            >
                <Image source={{uri: dataArr[index].icon}} style={{width:shopW, height:shopW}}/>
                <Text>{dataArr[index].name}</Text>
            </View>
        );

        // 6. 取出购物车数组
        let tempArr = this.state.shopArr;
        tempArr.push(shopView);

        this.setState({
            shopArr: tempArr
        })

    }

    /**
     * 移除商品
     */
    _removeShop() {
        let tempArr = this.state.shopArr;
        if(tempArr.length === 0){
            alert('购物车空空如也~');
            return;
        }

        tempArr.pop();
        this.setState({
            shopArr: tempArr
        })
    }
}

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

    topViewStyle: {
        flexDirection: 'row',
        margin: 30
    },

    clickBtnStyle: {
        width: 120,
        height: 40,
        borderRadius: 10,
        backgroundColor: 'green',

        // 主轴和侧轴都居中
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10
    },

    btnTextStyle: {
        backgroundColor: 'transparent',
        fontSize: 16,
        color: '#fff'
    },

    bottomViewStyle: {
        width: 0.9 * width,
        height: 0.7 * height,
        backgroundColor: '#fff',
        marginLeft: 0.05 * width
    }

});