Navigation

    论坛 - React Native中文社区

    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Search
    1. Home
    2. yangaijun
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    yangaijun

    @yangaijun

    1
    Reputation
    10
    Posts
    312
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    yangaijun Follow

    Best posts made by yangaijun

    • 更新 建筑行业APP 功能模块!有图有真相,请不要用于任何商业用途

      0_1564653525358_Honeycam 2019-08-01 17-50-03.gif 0_1564653423481_12.gif 0_1564653492495_123.gif 0_1564653501413_Honeycam 2019-08-01 17-48-28.gif 0_1564653509200_Honeycam 2019-08-01 17-48-53.gif 0_1564653515206_Honeycam 2019-08-01 17-50-22.gif ![0_1564653519503_Honeycam 2019-08-01 17-49-41.gif](正在上传 100%)
      截图地址
      GITHUB 项目地址

      posted in 分享
      yangaijun
      yangaijun

    Latest posts made by yangaijun

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

      项目地址
      0_1566871282969_zujiantonxin.gif

      //页面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>
              );
          }
        }
      posted in 分享
      yangaijun
      yangaijun
    • react native二叉树

      0_1566616248352_tree.gif

      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>
              );
          }
        }
      posted in 分享
      yangaijun
      yangaijun
    • 更新 建筑行业APP 功能模块!有图有真相,请不要用于任何商业用途

      0_1564653525358_Honeycam 2019-08-01 17-50-03.gif 0_1564653423481_12.gif 0_1564653492495_123.gif 0_1564653501413_Honeycam 2019-08-01 17-48-28.gif 0_1564653509200_Honeycam 2019-08-01 17-48-53.gif 0_1564653515206_Honeycam 2019-08-01 17-50-22.gif ![0_1564653519503_Honeycam 2019-08-01 17-49-41.gif](正在上传 100%)
      截图地址
      GITHUB 项目地址

      posted in 分享
      yangaijun
      yangaijun
    • 使用react-native-freedomen 快速开发之-表单

      0_1563367968351_ccc.gif
      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>
                )
          }
        }
      posted in 分享
      yangaijun
      yangaijun
    • 建筑行业App分享,有图,有源码,切勿用于商业用途

      0_1561801700991_sm1.gif1_1561801813398_sm3.gif 0_1561801813398_sm2.gif
      项目仍然处于开发阶段,功能比较多,持续完善中,喜欢可以关注哦 git地址

      posted in 分享
      yangaijun
      yangaijun
    • react native UI框架分享

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

      posted in 分享
      yangaijun
      yangaijun
    • 商城DEMO

      分享个商城DEMO给大家链接文本

      posted in 分享
      yangaijun
      yangaijun
    • rn 做的商城DEMO 分享给大家

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

      posted in 讨论区
      yangaijun
      yangaijun
    • 准备套装ui

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

      posted in 分享
      yangaijun
      yangaijun
    • react native 自己做样式的框架

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

      posted in 讨论区
      yangaijun
      yangaijun