
截图地址
GITHUB 项目地址
yangaijun
@yangaijun
1
Reputation
10
Posts
312
Profile views
0
Followers
0
Following
Best posts made by yangaijun
-
更新 建筑行业APP 功能模块!有图有真相,请不要用于任何商业用途
Latest posts made by yangaijun
-
React Native 最快捷的开发框架分享
//页面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> ); } }
-
react native二叉树
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> ); } }
-
更新 建筑行业APP 功能模块!有图有真相,请不要用于任何商业用途

截图地址
GITHUB 项目地址 -
使用react-native-freedomen 快速开发之-表单
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> ) } }
-
准备套装ui
最近使用react native 开发总是映入各种包,而且组件直接数据传递,看起来头疼,乱七八糟的组件,又引入来引入去的,好麻烦,还有那个redux用起来还真是不方便,然后做了个套装的库,希望能有帮助,Freedomen
-
react native 自己做样式的框架
最近使用react native 开发总是映入各种包,而且组件直接数据传递,看起来头疼,乱七八糟的组件,又引入来引入去的,好麻烦,还有那个redux用起来还真是不方便,然后做了个套装的库,希望能有帮助,文档地址:Freedomen