react-native-tableview-form

react-native-tableview-form

React Native Form 支持Android和IOS

Installation

npm i react-native-tableview-form --save

• 日期选择依赖 react-native-datetime

Usage

First, require it from your app's JavaScript files with:

import Form from 'react-native-tableview-form';

Example

'use strict';

import React,{
    Component,
    StyleSheet,
    View
} from 'react-native';
import Button from 'apsl-react-native-button';
import IconIon from 'react-native-vector-icons/Ionicons';
import Form from 'react-native-tableview-form';

export default class PDF extends Component {
    constructor(props) {
        super(props);
    }
    
    onButtonPress(){
        console.log(this.loginForm.getValue());
    }
    
    render(){
      let model = {
            studentName: {
                type: Form.fieldType.Label,
                label: "姓名",
                value: "Hello Wold!"
            },
            age: {
                type: Form.fieldType.Number,
                label: "年龄",
                value: 18,
                placeholder: "请填写年龄",
                labelStyle: {},
                valueStyle: {},
                onFieldChange: (value, ref)=>{
                    console.log(value);
                    console.log(ref);
                }
            },
            password: {
                type: Form.fieldType.Password,
                label: "密码",
                value: "",
                placeholder: "请填写密码",
                disabled: false,
                labelStyle: {},
                valueStyle: {},
                onFieldChange: (value, ref)=>{
                    console.log(value);
                    console.log(ref);
                }
            },
            selectOne: {
                type: Form.fieldType.Select,
                disabled: false,
                label: "性别",
                value: "男",
                onPress:()=>{
                    console.log('select press.');
                }
            },
            selectDt: {
                type: Form.fieldType.Date,
                disabled: false,
                label: "日期",
                value: "2016-01-03",
                onPress:(date)=>{
                    console.log(date);
                }
            },
            selectTime: {
                type: Form.fieldType.Time,
                disabled: false,
                label: "时间",
                value: "18:43",
                onPress:(time)=>{
                    console.log(time);
                }
            },
            selectDtTime: {
                type: Form.fieldType.DateTime,
                disabled: false,
                label: "日期时间",
                value: "2016-01-03 10:56",
                onPress:(time)=>{
                    console.log(time);
                }
            },
            rememberMe: {
                type: Form.fieldType.Boolean,
                label: "记住我",
                value: true,
                labelStyle: {},
                valueStyle: {},
                onFieldChange: (value, ref)=>{
                    console.log(value);
                    console.log(ref);
                }
            }
        };

        return (
            <View style={{flex:1}}>
                <View style={styles.container}>
                    <View style={styles.qrContainer}>
                        <IconIon
                            name="ios-unlocked-outline"
                            size={120}/>
                    </View>
                    <Form
                        style={{flex:1}}
                        ref={(frm)=> this.loginForm = frm}
                        model={model}
                    />
                    <Button onPress={this.onButtonPress.bind(this)}>
                        确 定
                    </Button>
                </View>
            </View>
        );
    }
}
var styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        flex: 1,
        margin: 15
    },
    pwdContainer:{
        marginBottom: 20,
        flexDirection:'row',
        alignItems: 'center'
    },
    qrContainer:{
        marginTop: 10,
        marginBottom: 10,
        alignItems: 'center'
    }
});

Methods

• getValue()