专栏首页ElementUIReact Native 最快捷的开发框架分享
原创

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 结合mybatis-plus 实现无XML多表联查询

    实现简单的实体类操作多表, 首先你的项目是使用了mybatis-plus 才可以使用

    工具人
  • 可视化管理系统开发工具,查询,表单,表格等等

    可视化工具快速开发管理平台,让你的开发造起来,随便输入即可注册了,给程序员用的工具

    工具人
  • 通过导入SQL生成管理系统

    通过导入 sql 文件, 选择相应字段生成elementui + vue 的后台管理系统工具:工具地址

    工具人
  • vue 页面逻辑复用

    在开发表单页面时, 经常碰到一种情况。 同一表单存在 新建 编辑 查看 几种状态。页面的大体组成基本相同,但又需要做部分针对当前状态的处理,处理这类问题,一般存...

    copy_left
  • Django 解决上传文件时,request.FILES为空的问题

    用html的form上传文件时,request.FILES为空,没有收到上传来的文件,但是在request.POST里找到了上传的文件名(只是一个字符串)。

    砸漏
  • Flask(表单验证 八)

    zx钟
  • Django上传文件时,request.FILES为空的问题

    用html的form上传文件时,request.FILES为空,没有收到上传来的文件,但是在request.POST里找到了上传的文件名(只是一个字符串)。

    kirin
  • flask 一个页面多个提交按钮(flask 23)

    class NewPostForm(FlaskForm): title = StringField('Title', validators=[DataRequ...

    用户5760343
  • Django学习之八:forms组件【对

        Handle (掌控)一个form是非常复杂的工程,需要做很多功能:不同的类型的数据要有不同的渲染;校验数据;获取检验后的干净数据,并将数据反序列化为相...

    py3study
  • Django小技巧15: 使用基于类视图的Mixins

    依类似的方式, 你可以在UpdateView中, 重用相同的FormMessageMixin, 并覆盖默认的form_invalid_message方法.

    用户1416054

扫码关注云+社区

领取腾讯云代金券