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>
        );
    }
  }