tcomb-form-native表单处理控件
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);
结果:
评论