表单处理控件 tcomb-form-native

MIT
JavaScript
iOS
2015-04-03
叶秀兰

tcomb-form-native 是 React Native 强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。

在线演示:http://react.rocks/example/tcomb-form-native

安装:

npm install tcomb-form-native

示例:

// index.ios.js
'use strict';
var React = require('react-native');
var t = require('tcomb-form-native');
var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } = React;
var Form = t.form.Form;
// here we are: define your domain model
var Person = t.struct({
  name: t.Str,              // a required string
  surname: t.maybe(t.Str),  // an optional string
  age: t.Num,               // a required number
  rememberMe: t.Bool        // a boolean
});
var options = {}; // optional rendering options (see documentation)
var AwesomeProject = React.createClass({
  onPress: function () {
    // call getValue() to get the values of the form
    var value = this.refs.form.getValue();
    if (value) { // if validation fails, value will be null
      console.log(value); // value here is an instance of Person
    }
  },
  render: function() {
    return (
      <View style={styles.container}>
        {/* display */}
        <Form
          ref="form"
          type={Person}
          options={options}
        />
        <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Save</Text>
        </TouchableHighlight>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 30,
    alignSelf: 'center',
    marginBottom: 30
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

结果:


加载中

评论(1)

Mr_K
Mr_K

暂无资讯

暂无问答

React Native 常用组件包

兼容Android,iOS,经过开发实践,觉得不错,js.coach排名很靠前

2016/08/07 09:23
356
0
整理了一份React-Native学习指南

自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大...

2016/11/03 23:44
70
1
React-Native学习资源

React-Native学习资源 目录 教程 React Native React.js ES6 系列教程 kai源APP 组件 工具 资源网站 业界讨论 教程 React Native React-Native专题系列文章不断更新ing(入门,组件,Api,kai源项...

2016/03/29 10:26
125
1
React-Native学习资源

场景:React-Native学习资源

2016/03/27 02:16
320
1
React Native初探

React Native初探 前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上...

02/20 17:04
8
0
用纯Javascript实现React Native的文件上传

React Native 是最近两年最值得花时间跟进的移动开发技术,本文将介绍如何使用原生Javascript上传文件,如何使用七牛云SDK上传文件到七牛云。

2016/04/27 11:21
200
1
帮助查看本地表单元素样子的网站 - Native Form Elements

日期:2013-4-20 来源:GBin1.com 如果你想查看某个表单组建在特定浏览器或者操作系统上的长相的话,这个工具网站 - Native Form Elements 肯定能够帮你忙! 它没有任何其它的内容,只是把所...

2013/04/30 22:46
6
0
Symfony2 Form Architecture

Symfony2 features a brand-new Form component that, to my knowledge, supersedes most existing PHP form libraries in functionality and extensibility (not counting the still lackin...

2013/11/03 01:07
31
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部