react-native入门(七)----编写一个小组件

这里我们就介绍写一个购物车的计数器

话不多说，献上一段代码

import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Keyboard,
TextInput} from 'react-native';
import px2dp from "../../utils/px2dp";
import PropTypes from 'prop-types'

export default class Counter extends Component {

    constructor(props) {
        super(props);
        this.state = {
            count: this.props.value.toString()
        }

    }

    static propTypes = {
        countStyle: PropTypes.object,
        onChanged: PropTypes.func
    };

    componentDidMount() {
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',(event)=>{
            Keyboard.dismiss();
            this.props.onChanged && this.props.onChanged(parseInt(this.state.count))
        });
    }

    componentWillUnmount() {
        this.keyboardDidHideListener.remove()
    }

    render() {
        const {countStyle, onChanged} = this.props;
        return (
            <View style={[styles.containStyle, countStyle]}>
                <TouchableOpacity
                    style={styles.operateBackgroundStyle}
                    onPress={()=>{
                        let count = parseInt(this.state.count);
                        count--;
                        count = count > 0 ? count : 1;
                        this.setState({count: count.toString()})
                        onChanged(count);
                    }}>
                    <Text style={styles.SubTextStyle}>-</Text>
                </TouchableOpacity>

                <TextInput
                    style={[styles.middleBackgroundStyle, styles.TextStyle, {paddingHorizontal: px2dp(20), paddingVertical: 0}]}
                    value={this.state.count}
                    underlineColorAndroid={'transparent'}
                    onFocus={() => this.setState({ focus: true })}
                    onBlur={() => this.setState({ focus: false })}
                    onChangeText={value => {
                        const reg = /^(\d{0,4})(\d)$/;
                        if (value.length > 5) {
                            this.setState({count: value.substr(0, 5)})
                        }else if (reg.test(value)) {
                            this.setState({count: value})
                        }else {
                            this.setState({count: '1'})
                        }
                    }}
                    onSubmitEditing={()=>{
                        Keyboard.dismiss()
                        onChanged(parseInt(this.state.count))
                    }}
                    keyboardType='number-pad'
                    returnKeyType={'done'}
                />

                <TouchableOpacity
                    style={styles.operateBackgroundStyle}
                    onPress={()=>{
                        let count = parseInt(this.state.count);
                        count++;
                        this.setState({count: count.toString()})
                        onChanged(count)
                    }}>
                    <Text style={styles.SubTextStyle}>+</Text>
                </TouchableOpacity>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    containStyle: {
        borderColor: '#F1F1F1',
        borderWidth: px2dp(1),
        borderRadius: px2dp(2),
        height: px2dp(50),
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center'
    },
    operateBackgroundStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        width: px2dp(50),
        height: px2dp(50),
    },
    middleBackgroundStyle: {
        borderColor: '#F1F1F1',
        borderWidth: px2dp(1),
        paddingHorizontal: px2dp(20),
        height: px2dp(50),
        justifyContent: 'center',
        alignItems: 'center'
    },
    TextStyle: {
        color: 'black',
        fontSize: px2dp(26),
    },
    SubTextStyle: {
        color: '#333333',
        fontSize: px2dp(36)
    }

})

一个计数器的小组件代码就这些了

上面的propTypes表示声明属性

styles代表的是样式，样式也可以直接编写到view里面