React-Native-最快捷的开发框架分享

GITHUB 地址链接描述

简洁的代码

// 页面 A
import React from 'react'
import {ScrollView,View} from "react-native";  
import Freedomen from 'react-native-freedomen' 

export default class extends React.Component {
    static navigationOptions = {title: '数据交换'}
    constructor(props) {super(props)
        this.state = {form: {}
        }
    }
    render() {  
        return ( 
            <ScrollView >  
                <Freedomen.Region 
                    style={{padding: 2, backgroundColor: '#f5f5f5'} }
                    event={params => {if (params.prop == 'submit') {alert(JSON.stringify(params.row))
                        } else if (params.prop == 'address') {this.props.navigation.push('Address', params.row)
                        }
                    }} 
                    redux={'sjjh_form'}
                    data={this.state.form}
                    columns={[   
                        [{type: 'text-h1', value: '数据交换验证'},
                            {type: 'br-form-row'}
                        ],
                        [{type: 'text-form-label',  value: '姓名'},
                            {type: 'input-text', prop: 'name', placeholder: '请输入姓名', style: {flex: 1}},
                            {type: 'text-must', prop: 'vaild_name'},
                            {type: 'br-form-row'}
                        ], [{type: 'text-form-label', value: '姓别'},
                            {type: 'select', prop: 'sex', options: '男, 女', placeholder: '请选择性别', style: {flex: 1}},
                            {type: 'text-must', prop: 'vaild_sex'},
                            {type: 'br-form-row'}
                        ], [{type: 'text-form-label', value: '日期'},
                            {type: 'pick-date', prop: 'age', placeholder: '请选择出生日期', style: {flex: 1, padding: 0, margin: 0}},
                            {type: 'text-must', prop: 'vaild_age'},
                            {type: 'br-form-row'}
                        ], [{type: 'text-form-label', value: '地址'},
                            {type: 'text-h5', prop: 'addressName', placeholder: '请选择地址', style: {flex: 1}},
                            {type: 'image', value: require('../assets/right.png'), style: {width: 14, height: 14}},
                            {type: 'click-form-row', prop: 'address'}
                        ], [{type: 'text-form-label', value: '简介'},
                            {type: 'input-area', prop: 'intro', maxLength: 200, placeholder: '请简要介绍自己', style: {paddingTB: 5}},
                            {type: 'br-form-col'}
                        ], [{type: 'text-form-label', value: '评价'},
                            {type: 'rate', prop: 'star', style: {paddingRight: 10}},
                            {type: 'br-form-row', style: {marginBottom: 5}}
                        ],
                        {type: 'button-primary', value: '提交', prop: 'submit', disabled: (value, data) => !data.name}
                    ]}
                />
            </ScrollView>
          )
    }
  }

  // 页面 B
  export default  class  extends React.Component {static navigationOptions = ({navigation}) => {
        return {title: '地址选择'}
    }
    constructor(props) {super(props)
        this.state = {list: [],
            choose: props.navigation.state.params
        }
    }
    componentDidMount() {this._loadData()
    }
    _loadData() {
        this.setState({
            list: [{addressId: 1, addressName: '江苏 苏州'},
                {addressId: 2, addressName: '江苏 南京'},
                {addressId: 3, addressName: '江苏 宿迁'},
                {addressId: 4, addressName: '江苏 镇江'},
                {addressId: 5, addressName: '江苏 合肥'},
                {addressId: 6, addressName: '上海 上海市'},
                {addressId: 7, addressName: '北京 北京市'},
                {addressId: 8, addressName: '河南 郑州'},
            ]
        })
    }
    render() {
        return (<ScrollView style={ {backgroundColor: '#f5f5f5'} }>
                {this.state.list.map((el, index) => {
                        return <Freedomen.Region 
                            key={index}
                            data={el}
                            event={params => {
                                Freedomen.redux({sjjh_form: (data) => {
                                        return {
                                            ...data,
                                            ...params.row
                                        }
                                    }
                                })
                                this.props.navigation.goBack()}}
                            columns={[{type: 'text-h4', prop: 'addressName', style: (value, data) => {return (data.addressId == this.state.choose.addressId) && {color: 'blue'}
                                }},
                                {type: 'click-form-row'}
                            ]}
                        />
                    })
                }    
            </ScrollView>
        );
    }
  }