React Native 封装金额自动保存两位小数组件

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    Text
} from 'react-native';
import { Widget } from 'rn-yunxi';
const { width, height } = Dimensions.get('window');
//模块声名并导出
export default class PriceText extends Component {

    //默认属性
    static defaultProps = {
        price: 0.00,
        size: 1,
        priceSize: null,
        rmbSize: null,
    };
    //构造函数
    constructor(props) {
        super(props);
        this.state = { //状态机变量声明
        }
    }

    changeTwoDecimal_f(x) {
        try {
            let f_x1 = parseFloat(x);
            if (isNaN(f_x1)) {
                return x;
            }
            let f_x = Math.round(x * 100) / 100;
            let s_x = f_x.toString();
            let pos_decimal = s_x.indexOf('.');
            if (pos_decimal < 0) {
                pos_decimal = s_x.length;
                s_x += '.';
            }
            while (s_x.length <= pos_decimal + 2) {
                s_x += '0';
            }
            return s_x;
        } catch (e) {
            return '0.00';
        }
    }

    //渲染
    render() {
        const { price, size, priceSize, rmbSize } = this.props;

        let rmbStyle = null;
        let priceStyle = null;
        if (priceSize && rmbSize) {
            rmbStyle = rmbSize;
            priceStyle = priceSize;
        } else if (size === 1) {
            rmbStyle = styles.rmbBig;
            priceStyle = styles.priceBig;
        } else if (size === 2) {
            rmbStyle = styles.rmbSmall;
            priceStyle = styles.priceSmall;
        } else if (size === 4) {
            rmbStyle = styles.rmbwhite;
            priceStyle = styles.priceWhite;
        } else if (size === 5) {
            rmbStyle = styles.rmbBlack;
            priceStyle = styles.priceBlack;
        } else {
            rmbStyle = styles.rmbGray;
            priceStyle = styles.priceGray;
        }
        if (price < 0) {
            return (
                <Text
                    style={[rmbStyle,{color:Constant}]}
                    allowFontScaling={false}
                >¥ <Text
                    allowFontScaling={false}
                    style={priceStyle}
                >0</Text></Text>
            )
        }
        let str = null;
        try {
            str = this.changeTwoDecimal_f(price).match(/(\d*)\.(\d*)/);
        } catch (error) {
        }
        if (str) {
            return (
                <Text
                    style={rmbStyle}
                    allowFontScaling={false}
                > ¥ <Text
                    allowFontScaling={false}
                    style={priceStyle}
                >{str[1]}.</Text>{str[2]}</Text>
            );
        } else {
            return (
                <Text
                    style={rmbStyle}
                    allowFontScaling={false}
                >¥ <Text
                    allowFontScaling={false}
                    style={priceStyle}
                >{price}</Text></Text>
            );
        }
    }
};

const styles = StyleSheet.create({
    rmbBig: {
        color: '#FA3D4F',
        fontSize: 14
    },
    priceBig: {
        color: '#FA3D4F',
        fontSize: 18
    },
    rmbSmall: {
        color: '#FA3D4F',
        fontSize: 12
    },
    priceSmall: {
        color: '#FA3D4F',
        fontSize: 14
    },

    rmbGray: {
        color: '#777777',
        fontSize: 12
    },
    priceGray: {
        color: '#777777',
        fontSize: 14
    },
    rmbwhite: {
        color: '#FFFFFF',
        fontSize: 14,
        backgroundColor: 'transparent'

    },
    priceWhite: {
        color: '#FFFFFF',
        fontSize: 14,
        backgroundColor: 'transparent'
    },
    rmbBlack: {
        color: '#333333',
        fontSize: 14,
        backgroundColor: 'transparent'
    },
    priceBlack: {
        color: '#333333',
        fontSize: 14,
        backgroundColor: 'transparent'
    },



    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginLeft: 10,
        marginRight: 10,
    },
    itemStyle: {
        marginRight: 8,
        marginLeft: 8,
        marginBottom: 8,
        borderColor: '#dddddddd',
        borderRadius: 4,
        borderWidth: 0.5,
        height: 34,
        padding: 6,
        justifyContent: 'center',
        alignSelf: 'center',
    },
    itemTxtStyle: {
        textAlignVertical: 'center',
        textAlign: 'center',
        color: '#777777',
        flex: 0,
        fontSize: 14
    },
    itemSelectStyle: {
        marginRight: 8,
        marginLeft: 8,
        marginBottom: 8,
        borderColor:'#dddddddd',
        borderRadius: 4,
        borderWidth: 0.5,
        height: 34,
        padding: 6,
        justifyContent: 'center',
        alignSelf: 'center',
    },


    itemTxtSelectStyle: {
        textAlign: 'center',
        color: '#FA3D4F',
        flex: 0,
        textAlignVertical: 'center',
        fontSize: 14
    },

    itemDisableStyle: {
        marginRight: 8,
        marginLeft: 8,
        marginBottom: 8,
        borderColor: '#00000000',
        borderRadius: 4,
        borderWidth: 0.5,
        height: 34,
        padding: 6,
        justifyContent: 'center',
        alignSelf: 'center',
    },
    itemTxtDisableStyle: {
        textAlign: 'center',
        color: '#dddddddd',
        flex: 0,
        textAlignVertical: 'center',
        fontSize: 14
    },
});

使用：

<PriceText 
    price={'123'} 
    size={1}
/>

    size={1}    红色 18号
        ={2}    红色 14号
        ={3}    灰色 14号
        ={4}    白色 14号
        ={5}    黑色 14号