智慧城市>> react-native-gifted-form-update>> 返回
项目作者： njgaoqing

项目描述 ：
修改react-native-gifted-form中的navigation为react-navigation
高级语言： JavaScript
项目地址: git://github.com/njgaoqing/react-native-gifted-form-update.git
创建时间： 2018-03-29T04:26:30Z
项目社区：https://github.com/njgaoqing/react-native-gifted-form-update
开源协议：MIT License
下载


Gifted Form

在原有react-native-gifted-form基础上新增组件 并修改navigation方式

npm downloads
npm version
Latest GitHub tag

Form component for React Native.

screenshot

Example

  1. var { GiftedForm, GiftedFormManager } = require('react-native-gifted-form');
  3. var FormComponent = createReactClass({
  4.   render() {
  5.     return (
  6.       <GiftedForm
  7.         formName='signupForm' // GiftedForm instances that use the same name will also share the same states
  8.         openModal={(route) => {
  9.           navigator.push(route); // The ModalWidget will be opened using this method. Tested with ExNavigator
  10.         }}
  11.         clearOnClose={false} // delete the values of the form when unmounted
  12.         defaults={{
  13.           /*
  14.           username: 'Farid',
  15.           'gender{M}': true,
  16.           password: 'abcdefg',
  17.           country: 'FR',
  18.           birthday: new Date(((new Date()).getFullYear() - 18)+''),
  19.           */
  20.         }}
  21.         validators={{
  22.           fullName: {
  23.             title: 'Full name',
  24.             validate: [{
  25.               validator: 'isLength',
  26.               arguments: [1, 23],
  27.               message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
  28.             }]
  29.           },
  30.           username: {
  31.             title: 'Username',
  32.             validate: [{
  33.               validator: 'isLength',
  34.               arguments: [3, 16],
  35.               message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
  36.             },{
  37.               validator: 'matches',
  38.               arguments: /^[a-zA-Z0-9]*$/,
  39.               message: '{TITLE} can contains only alphanumeric characters'
  40.             }]
  41.           },
  42.           password: {
  43.             title: 'Password',
  44.             validate: [{
  45.               validator: 'isLength',
  46.               arguments: [6, 16],
  47.               message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
  48.             }]
  49.           },
  50.           emailAddress: {
  51.             title: 'Email address',
  52.             validate: [{
  53.               validator: 'isLength',
  54.               arguments: [6, 255],
  55.             },{
  56.               validator: 'isEmail',
  57.             }]
  58.           },
  59.           bio: {
  60.             title: 'Biography',
  61.             validate: [{
  62.               validator: 'isLength',
  63.               arguments: [0, 512],
  64.               message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
  65.             }]
  66.           },
  67.           gender: {
  68.             title: 'Gender',
  69.             validate: [{
  70.               validator: (...args) => {
  71.                 if (args[0] === undefined) {
  72.                   return false;
  73.                 }
  74.                 return true;
  75.               },
  76.               message: '{TITLE} is required',
  77.             }]
  78.           },
  79.           birthday: {
  80.             title: 'Birthday',
  81.             validate: [{
  82.               validator: 'isBefore',
  83.               arguments: [moment().utc().subtract(18, 'years').format('YYYY-MM-DD')],
  84.               message: 'You must be at least 18 years old'
  85.             }, {
  86.               validator: 'isAfter',
  87.               arguments: [moment().utc().subtract(100, 'years').format('YYYY-MM-DD')],
  88.               message: '{TITLE} is not valid'
  89.             }]
  90.           },
  91.           country: {
  92.             title: 'Country',
  93.             validate: [{
  94.               validator: 'isLength',
  95.               arguments: [2],
  96.               message: '{TITLE} is required'
  97.             }]
  98.           },
  99.         }}
  100.       >
  101.         <GiftedForm.SeparatorWidget ></GiftedForm.SeparatorWidget>
  103.         <GiftedForm.TextInputWidget
  104.           name='fullName' // mandatory
  105.           title='Full name'
  106.           image={require('../../assets/icons/color/user.png')}
  107.           placeholder='Marco Polo'
  108.           clearButtonMode='while-editing'
  109.         ></GiftedForm.TextInputWidget>
  111.         <GiftedForm.TextInputWidget
  112.           name='username'
  113.           title='Username'
  114.           image={require('../../assets/icons/color/contact_card.png')}
  115.           placeholder='MarcoPolo'
  116.           clearButtonMode='while-editing'
  117.           onTextInputFocus={(currentText = '') => {
  118.             if (!currentText) {
  119.               let fullName = GiftedFormManager.getValue('signupForm', 'fullName');
  120.               if (fullName) {
  121.                 return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
  122.               }
  123.             }
  124.             return currentText;
  125.           }}
  126.         />
  128.         <GiftedForm.TextInputWidget
  129.           name='password' // mandatory
  130.           title='Password'
  131.           placeholder='******'
  132.           clearButtonMode='while-editing'
  133.           secureTextEntry={true}
  134.           image={require('../../assets/icons/color/lock.png')}
  135.         ></GiftedForm.TextInputWidget>
  137.         <GiftedForm.TextInputWidget
  138.           name='emailAddress' // mandatory
  139.           title='Email address'
  140.           placeholder='example@nomads.ly'
  141.           keyboardType='email-address'
  142.           clearButtonMode='while-editing'
  143.           image={require('../../assets/icons/color/email.png')}
  144.         ></GiftedForm.TextInputWidget>
  146.         <GiftedForm.SeparatorWidget ></GiftedForm.SeparatorWidget>
  148.         <GiftedForm.ModalWidget
  149.           title='Gender'
  150.           displayValue='gender'
  151.           image={require('../../assets/icons/color/gender.png')}
  152.         >
  153.           <GiftedForm.SeparatorWidget ></GiftedForm.SeparatorWidget>
  155.           <GiftedForm.SelectWidget name='gender' title='Gender' multiple={false}>
  156.             <GiftedForm.OptionWidget image={require('../../assets/icons/color/female.png')} title='Female' value='F'></GiftedForm.OptionWidget>
  157.             <GiftedForm.OptionWidget image={require('../../assets/icons/color/male.png')} title='Male' value='M'></GiftedForm.OptionWidget>
  158.           </GiftedForm.SelectWidget>
  159.         </GiftedForm.ModalWidget>
  161.         <GiftedForm.ModalWidget
  162.           title='Birthday'
  163.           displayValue='birthday'
  164.           image={require('../../assets/icons/color/birthday.png')}
  165.           scrollEnabled={false}
  166.         >
  167.           <GiftedForm.SeparatorWidget></GiftedForm.SeparatorWidget>
  169.           <GiftedForm.DatePickerIOSWidget
  170.             name='birthday'
  171.             mode='date'
  172.             getDefaultDate={() => {
  173.               return new Date(((new Date()).getFullYear() - 18)+'');
  174.             }}
  175.           />
  176.         </GiftedForm.ModalWidget>
  178.         <GiftedForm.ModalWidget
  179.           title='Country'
  180.           displayValue='country'
  181.           image={require('../../assets/icons/color/passport.png')}
  182.           scrollEnabled={false}
  183.         >
  184.           <GiftedForm.SelectCountryWidget
  185.             code='alpha2'
  186.             name='country'
  187.             title='Country'
  188.             autoFocus={true}
  189.           ></GiftedForm.SelectCountryWidget>
  190.         </GiftedForm.ModalWidget>
  192.         <GiftedForm.ModalWidget
  193.           title='Biography'
  194.           displayValue='bio'
  195.           image={require('../../assets/icons/color/book.png')}
  196.           scrollEnabled={true} // true by default
  197.         >
  198.           <GiftedForm.SeparatorWidget></GiftedForm.SeparatorWidget>
  200.           <GiftedForm.TextAreaWidget
  201.             name='bio'
  202.             autoFocus={true}
  203.             placeholder='Something interesting about yourself'
  204.           ></GiftedForm.TextAreaWidget>
  205.         </GiftedForm.ModalWidget>
  207.         <GiftedForm.ErrorsWidget></GiftedForm.ErrorsWidget>
  209.         <GiftedForm.SubmitWidget
  210.           title='Sign up'
  211.           widgetStyles={{
  212.             submitButton: {
  213.               backgroundColor: themes.mainColor,
  214.             }
  215.           }}
  216.           onSubmit={(isValid, values, validationResults, postSubmit = null, modalNavigator = null) => {
  217.             if (isValid === true) {
  218.               // prepare object
  219.               values.gender = values.gender[0];
  220.               values.birthday = moment(values.birthday).format('YYYY-MM-DD');
  222.               /* Implement the request to your server using values variable
  223.               ** then you can do:
  224.               ** postSubmit(); // disable the loader
  225.               ** postSubmit(['An error occurred, please try again']); // disable the loader and display an error message
  226.               ** postSubmit(['Username already taken', 'Email already taken']); // disable the loader and display an error message
  227.               ** GiftedFormManager.reset('signupForm'); // clear the states of the form manually. 'signupForm' is the formName used
  228.               */
  229.             }
  230.           }}
  231.         />
  233.         <GiftedForm.NoticeWidget
  234.           title='By signing up, you agree to the Terms of Service and Privacy Policity.'
  235.         ></GiftedForm.NoticeWidget>
  237.         <GiftedForm.HiddenWidget name='tos' value={true} ></GiftedForm.HiddenWidget>
  238.       </GiftedForm>
  239.     );
  240.   }
  241. });

Storing form’s state elsewhere (could be used with Redux) - Beta feature

Pass value prop to your widgets and onValueChange to your GiftedForm to store your state outside of GiftedFormManager’s store.

IMPORTANT: currently only TextInputWidget and HiddenWidget support this feature. PR’s are welcome for the other widgets ;)

  1. import React, { AppRegistry, Component } from 'react-native'
  2. import { GiftedForm, GiftedFormManager } from 'react-native-gifted-form'
  4. class Form extends Component {
  5.   constructor(props, context) {
  6.     super(props, context)
  7.     this.state = {
  8.       form: {
  9.         fullName: 'Marco Polo',
  10.         tos: false,
  11.       }
  12.     }
  13.   }
  15.   handleValueChange(values) {
  16.     console.log('handleValueChange', values)
  17.     this.setState({ form: values })
  18.   }
  20.   render() {
  21.     const { fullName, tos, gender } = this.state.form
  22.     console.log('render', this.state.form)
  23.     return (
  24.       <GiftedForm
  25.         formName='signupForm'
  26.         openModal={(route) => { this.props.navigator.push(route) }}
  27.         onValueChange={this.handleValueChange.bind(this)}
  28.       >
  29.         <GiftedForm.TextInputWidget
  30.           name='fullName'
  31.           title='Full name'
  32.           placeholder='Marco Polo'
  33.           clearButtonMode='while-editing'
  34.           value={fullName}
  35.         ></GiftedForm.TextInputWidget>
  36.         <GiftedForm.HiddenWidget name='tos' value={tos} ></GiftedForm.HiddenWidget>
  37.       </GiftedForm>
  38.     )
  39.   }
  40. }
  42. AppRegistry.registerComponent('Form', () => Form)

Installation

  1. npm install react-native-gifted-form --save
  2. # OR
  3. yarn add react-native-gifted-form

Available widgets

  • TextInputWidget - A text input
  • TextAreaWidget - A text area
  • GooglePlacesWidget - A Google Places picker based on react-native-google-places-autocomplete
  • ModalWidget - A route opener for nested forms
  • GroupWidget - A widgets container with a title
  • HiddenWidget - A non-displayed widget. The value will be passed to SubmitWidget
  • LoadingWidget - A loader
  • RowWidget - A touchable row with title/image
  • RowValueWidget - A touchable row with title/image and a value
  • SelectCountryWidget - A country picker. Flags made by www.IconDrawer.com
  • SelectWidget - A select menu
  • SeparatorWidget - A 10px widgets separator
  • SubmitWidget - A submit button that trigger form validators and error displaying
  • SwitchWidget - A switch
  • DatePickerIOSWidget - Date picker for iOS
  • NoticeWidget - A notice information - PR wanted for onPress handler

See the widget sources for full props details.

Custom widgets

Widgets must implement the mixin GiftedForm.WidgetMixin. See TextAreaWidget for a good example.

Contributing

Pull requests are welcome! The author is very busy at the moment but there are also some contributors who are also helping out.

License

MIT

Feel free to ask me questions on Twitter @FaridSafi!