rc-mobile v0.0.14

    这是一款基于react antd-mobile封装的组件，里面封装了包括FormView和ListView等组件。

FormView样例

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FormView from '../FormView/FormView';
import settingIcon from '../img/setting.png';
import billIcon from '../img/bill.png';
import { UploadImage } from '../index';
const selectData = [
    [
        {
            label: '2013年',
            value: '2013',
        },
        {
            label: '2014年',
            value: '2014',
        },
        {
            label: '2015年',
            value: '2015',
        },
    ]
];
const imageData = [settingIcon, settingIcon, billIcon];

class FormViewExample extends Component {
    constructor() {
        super()
        this.state = {
            dataSource: {
                tel: "1314****668",
                phone: "123456",
                textArea: "TextAreaItem",
                season: ""
            },
            imageData: [settingIcon, settingIcon, billIcon]
        }
        this.typingChange = this.typingChange.bind(this);
    }
    typingChange = (key, value) => {
        this.state.dataSource[key] = value;
        this.setState(this.state);
        console.log(key, value);
    }
    clickFunc = (value) => {
        this.state.imageData.push(settingIcon);
        this.setState(this.state);
        console.log(value);
    }
    deleteImage = (arr, index) => {
        this.setState({ imageData: arr });
        console.log(arr, index);
    }
    render() {
        return (
            <div style={{ padding: "8px 0" }}>
                {/* <UploadImage /> */}
                <FormView
                    dataSource={this.state.dataSource}
                    dataModel={[
                        // { modelType: "WhiteSpace", size: "bg", title: "基本信息" },
                        { modelType: "Selection", modelName: "牌照类型", modelKey: "season", dataSource: selectData, extra: "" },
                        { modelType: "Selection", modelName: "车辆分类", modelKey: "season", dataSource: selectData, extra: "" },
                        { modelType: "TextInput", modelName: "车牌号码", modelKey: "phone", type: "", style: { textAlign: "right" } },
                        { modelType: "TextInput", modelName: "车辆所有人", modelKey: "phone", type: "", style: { textAlign: "right" } },
                        { modelType: "TextInput", modelName: "车架号", modelKey: "phone", type: "", style: { textAlign: "right" } },
                        { modelType: "DatePicker", modelName: "起始日期", modelKey: "Date", className: "datapicker", type: "date", arrow: "horizontal" },
                        { modelType: "DatePicker", modelName: "终止日期", modelKey: "Date", className: "datapicker", type: "date", arrow: "horizontal" },
                        { modelType: "TextInput", modelName: "地址", modelKey: "phone", type: "", style: { textAlign: "right" } },
                        { modelType: "TextAreaInput", modelName: "详细地址", modelKey: "textArea", icon: settingIcon, type: "", placeholder: "", maxlength: 100, clear: true, icon: "" },
                        { modelType: "UploadImage", modelName: "运营证图片", modelKey: "image", imageData: this.state.imageData, maxLength: "7", clickFunc: this.clickFunc, delete: this.deleteImage }
                    ]}
                    typingChange={this.typingChange}
                />

            </div>
        );
    }
};


export default FormViewExample;

ListView样例

import React from 'react';
import ListView from '../ListView/ListView';
const ListViewExample = props => {
    return (
        <div>
            <ListView
                dataSource={{
                    vehicleNum: "粤H05149",
                    status: "未审"
                }}
                dataModel={[
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal", href: "#/formViewExample" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                    { modelType: "Text", modelName: "vehicleNum", modelKey: "status", arrow: "horizontal" },
                ]}
            />

        </div>
    );
};

export default ListViewExample;