以 react-native 形式向字段添加选择菜单答案

【问题标题】：adding selection menu to fields in react-native form以 react-native 形式向字段添加选择菜单
【发布时间】：2015-12-22 14:41:33
【问题描述】：

我想使用下拉菜单在日期和时间字段中输入数据
选择菜单。请指导我该怎么做。我是新手反应原生我使用了来自 github 的 tcomb-form-native 模块。请指导我完成此操作。

'use strict';

var React = require('react-native');
//importing the react-native module
var t = require('tcomb-form-native');
//importing thetcomb-form-native module
var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } =     React;

var Form = t.form.Form;

//  here we are: define your domain model
var timeSlot = t.struct({
day: t.String,             
time:t.String   
});

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={timeSlot}
      options={options}
    />
    <TouchableHighlight style={styles.button} onPress={this.onPress}          underlayColor='#99d9f4'>
      <Text style={styles.buttonText}>continue</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'
 }
});


 module.exports=AwesomeProject

【问题讨论】：

标签： react-native tcomb

【解决方案1】：

这是一个较老的问题，我相信您已经找到了适合您的解决方案...但实际上有很好的文档说明如何使用tcomb-form-native 实现选择。 github 页面上的内容只是一个起点。 Check out the extended documentation here

如果您向下滚动到底部 Select component:https://github.com/gcanti/tcomb-form-native，则 github 页面还有关于 Select 的其他文档

【讨论】：

【解决方案2】：

我创建了一个支持 select (PickerIOS) 并具有原生外观的项目。使用我的库（可通过此链接访问 https://github.com/MichaelCereda/react-native-form-generator），您可以执行以下操作。

import { Form, 
        PickerField
      } from 'react-native-form-generator';

 export class MyCoolComponent extends React.Component{
  handleFormChange(formData){
    /*
    formData will contain all the values of the form,
    in this example.

    formData = {
      gender: '',
    }
     */

   }
   render(){
      <Form
        ref='registrationForm'
        onChange={this.handleFormChange.bind(this)}
        name="Personal Information">
        
        <PickerField ref='gender' placeholder='Gender'
          options={{
            male: 'Male',
            female: 'Female'
          }}/>
        
      </Form>);
  }
}

【讨论】：