mirror of
https://github.com/zhigang1992/react-native-jsonschema-form.git
synced 2026-06-15 00:38:56 +08:00
67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import React, { useRef } from 'react';
|
|
import { Button, ScrollView, StyleSheet, View } from 'react-native';
|
|
import ReactNativeForm, { defaultProps, FormContext } from 'rjsf-native';
|
|
import schema from './schema.json';
|
|
|
|
const uiSchema = {
|
|
toggle: {
|
|
'ui:widget': 'radio',
|
|
},
|
|
description: {
|
|
'ui:widget': 'textarea',
|
|
},
|
|
password: {
|
|
'ui:widget': 'password',
|
|
},
|
|
percentage: {
|
|
'ui:widget': 'range',
|
|
},
|
|
multiselect: {
|
|
'ui:widget': 'checkboxes',
|
|
},
|
|
};
|
|
|
|
export default () => {
|
|
const form = useRef(null);
|
|
|
|
return (
|
|
<FormContext.Provider
|
|
value={ {
|
|
...defaultProps,
|
|
} }
|
|
>
|
|
<ScrollView style={ styles.container }>
|
|
<View style={ styles.spacer }/>
|
|
<ReactNativeForm
|
|
ref={ form }
|
|
onError={ (e) => {
|
|
console.log(e);
|
|
} }
|
|
schema={ schema }
|
|
uiSchema={ uiSchema }
|
|
onSubmit={ (f) => console.log(f.formData) }>
|
|
<Button
|
|
title="Submit"
|
|
onPress={ () => {
|
|
if (form.current) {
|
|
form.current.submit();
|
|
}
|
|
} }
|
|
/>
|
|
</ReactNativeForm>
|
|
<View style={ styles.spacer }/>
|
|
</ScrollView>
|
|
</FormContext.Provider>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 16
|
|
},
|
|
spacer: {
|
|
height: 100,
|
|
},
|
|
});
|