截图地址
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>
        );
    }
  }

import React from 'react'
import {ScrollView, Text} from "react-native";
import Freedomen from 'react-native-freedomen'    
export default class extends React.Component {
    static navigationOptions = {
        title: '二叉树',
    } 
    constructor(props) {
        super(props)
        this.state = { 
            columns: [{type: 'text', value: 'loading'}]
        } 
        //保存数据，取得最后选择的数据
        this.data = {} 
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                columns: this.children([
                    {value: 1, label: '选项1',
                        children: [
                            {value: 2, label: '选项1-1'},
                            {value: 3, label: '选项1-2'},
                            {value: 4, label: '选项1-3', children: [
                                {value: 5, label: '选项1-3-1'},
                                {value: 6, label: '选项1-3-2'},
                            ]},   
                        ]
                    }, {
                        value: 7, label: '选项2'
                    }, {
                        value: 8, label: '选项3', children: [
                            {value: 9, label: '选项3-1'},
                            {value: 10, label: '选项3-2'},
                        ]
                    }
                ])
            })
        }, 800);
    }
    children(list, level = 0, item, label = '') {
        let arr = []
        list.forEach(el => {
            arr.push([
                {type: 'image-form',  filter: (value, data) => data[el.label + '_check'] ? require('../assets/check.png') : require('../assets/uncheck.png')},
                {type: 'text-h4', value: el.label, style: {flex: 1, marginLeft: 8}},
                {type: 'button-image', prop: el.value, filter: (value, data) => {
                    return data[el.value] ? require('../assets/bottom.png') : require('../assets/right.png')
                }, load: value => el.children, style: {width: 18, height: 18, paddingRight: 15, paddingLeft: 45}},
                {type: 'click', style: {paddingTB: 12, paddingLeft: 15, backgroundColor:'white', marginBottom: 2, flexDirection: 'row', alignItems: 'center', marginLeft: level * 35}, prop: el.label + '_check'}
            ])  
            
            this.data[el.label + '_check'] = label + el.label
            
            if (el.children) {
                arr.push(this.children(el.children, level + 1, el, label + el.label))
            } 
        })

        arr.push({
            type: 'br', 
            load: (value, data) => {
                if (item === void 0)
                    return true
                else return data[item.value]
            }
        })
        return arr
    }
    render() {
        return (
            <ScrollView style={{backgroundColor: '#f5f5f5'}}>
                <Freedomen.Region 
                    columns={this.state.columns}
                    event={params => { 
                        if (params.prop) {
                            let back = {
                                ...params.row 
                            }
                            back[params.prop] = !back[params.prop]

                            return back
                        } 
                    }}
                />
            </ScrollView>
        );
    }
  }

截图地址
GITHUB 项目地址

demo地址

mport React from 'react'
import {ScrollView,View } from "react-native";  
import Freedomen from 'react-native-freedomen' 

export default class extends React.Component {
    static navigationOptions = {
        title: 'Form 2'
    }
    constructor(props) {
        super(props)
        this.state = {
            form: {
                name: '测试姓名',
                age: '1994-08-08',
                star: 1,
                complete: .2
            }
        }
    }
    render() {  
        return ( 
            <ScrollView >  
                <Freedomen.Region 
                    style={{padding: 2}}
                    event={params => { 
                        if (params.prop == 'submit') { 
                            //使用 redux 来更新表单
                            Freedomen.redux({
                                form: (form) => {
                                    form.vaild_name = form.name !== '测试姓名' ? '必须输入"测试姓名"': ''
                                    form.vaild_sex = form.sex ? '' : '必选' 
                                    form.vaild_age = form.age ? '' : '必选' 
                                    return form
                                }
                            })
                            alert(JSON.stringify(params.row))
                        }
                    }} 
                    redux={'form'}
                    data={this.state.form}
                    columns={[   
                        [
                            {type: 'text-h1', value: '表单DEMO 2'},
                            {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: 'radios', prop: 'sex', options: '男,女', style: {borderRadius: 45}, 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}},
                            {type: 'text-must', prop: 'vaild_age'},
                            {type: 'br-form-row'}
                        ], [
                            {type: 'text-form-label', value: '完成 '},
                            {type: 'slider', prop: 'complete', style: {flex: 1, paddingRight: 10}},
                            {type: 'text', filter: (value, data) => parseInt(data.complete * 100) + '%'},
                            {type: 'br-form-row'}
                        ], [
                            {type: 'text-form-label', value: '爱好'},
                            {type: 'checkboxs', prop: 'hobby', options: '钓鱼,书法,唱歌', style: {flex: 1}},
                            {type: 'text-must', prop: 'vaild_hobby'},
                            {type: 'br-form-row'}
                        ], [  
                            {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>
          )
    }
  }

项目仍然处于开发阶段，功能比较多，持续完善中，喜欢可以关注哦 git地址

分享个非常有意思的UI 框架 链接文本

刚刚做的一个商城的DEMO，分享给大家链接文本

最近使用react native 开发总是映入各种包，而且组件直接数据传递，看起来头疼，乱七八糟的组件，又引入来引入去的，好麻烦，还有那个redux用起来还真是不方便，然后做了个套装的库，希望能有帮助,Freedomen

最近使用react native 开发总是映入各种包，而且组件直接数据传递，看起来头疼，乱七八糟的组件，又引入来引入去的，好麻烦，还有那个redux用起来还真是不方便，然后做了个套装的库，希望能有帮助,文档地址：Freedomen