项目作者: tuantvk

项目描述 :
React Native Select Awesome - Library for React Native on platform Android and iOS
高级语言: JavaScript
项目地址: git://github.com/tuantvk/react-native-select-awesome.git
创建时间: 2019-06-09T05:57:52Z
项目社区:https://github.com/tuantvk/react-native-select-awesome

开源协议:MIT License

下载


React Native Select Awesome - Library for React Native on platform Android and iOS

View on Github 1
View on Github 2
View on Github 3

Table of Content

  1. What is React Native Select Awesome?
  2. Getting Started
  3. Props
  4. Example
  5. License

1. What is React Native Select Awesome?

React Native Select Awesome ingenious and dynamic front-end framework created by TuanTVK to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.

2. Getting Started

Install

  1. npm install react-native-select-awesome --save
  2. # or use yarn
  3. yarn add react-native-select-awesome

Import

  1. import RNSelect from 'react-native-select-awesome';

or

  1. var RNSelect = require('react-native-select-awesome');

3. Props

Follow Style in React Native

Props Description Default PropTypes
datas specify the options the user can select from [] array isRequired
value control the current value "" string
placeholder change the text displayed when no option is selected Select value string
label customize label for select item label string
width width of input 100% string
height height of input 50 number
styleInput style customize for input {} object
styleItem style customize for item select {} object
stylePicker style customize container picker { height: 250 } object
notFind change the text displayed when no find value Not Find string
styleNotFind style customize for text notFind {} object
isDisabled whether the input is disabled true bool
selectValue return value when you use rightIcon props and select () => { } func
rightIcon customize component right, it is function return element of you and prop clearValue null func
clearValue clear value of select when you use rightIcon props and select func
customItem customize select item use component of you, it is function return prop (item, onPress) null func

4. Example

Ex1: Basic

  1. // At the top of your file
  2. import React, { Component } from 'react';
  3. import { View } from 'react-native';
  4. import RNSelect from 'react-native-select-awesome';
  5. const LANGS = [
  6. {id: 1, label: 'Java', value: 'java'},
  7. {id: 2, label: 'JavaScript', value: 'js'},
  8. {id: 3, label: 'Python', value: 'py'},
  9. {id: 4, label: 'C', value: 'c'},
  10. {id: 5, label: 'PHP', value: 'php'},
  11. ];
  12. const itemCustom = {color: '#146eff' };
  13. // Later on in your component
  14. export default class RNSelectExample extends Component {
  15. render() {
  16. return(
  17. <View>
  18. <RNSelect
  19. datas={LANGS}
  20. placeholder="Select lang"
  21. height={60}
  22. styleItem={itemCustom}
  23. ></RNSelect>
  24. </View>
  25. )
  26. }
  27. }

Ex2: Custom item

  1. // At the top of your file
  2. import React, { Component } from 'react';
  3. import { View, Text } from 'react-native';
  4. import RNSelect from 'react-native-select-awesome';
  5. const PERSONS = [
  6. {id: 1, name: 'Alexander', value: 'alexander'},
  7. {id: 2, name: 'Ethan', value: 'ethan'},
  8. {id: 3, name: 'Daniel', value: 'daniel'},
  9. {id: 4, name: 'Matthew', value: 'matthew'},
  10. {id: 5, name: 'Joseph', value: 'joseph'},
  11. ];
  12. // Later on in your component
  13. export default class RNSelectExample2 extends Component {
  14. render() {
  15. return(
  16. <View>
  17. <RNSelect
  18. datas={PERSONS}
  19. placeholder="Select people"
  20. label="name"
  21. notFind="Opp... !"
  22. styleNotFind={{ textAlign: 'center' }}
  23. customItem={(item, _selectValue) => {
  24. return (
  25. <View style={{marginBottom: 10, backgroundColor: '#f00'}}>
  26. <Text onPress={() => _selectValue(item)}>{item.name}</Text>
  27. </View>
  28. )
  29. }}
  30. />
  31. </View>
  32. )
  33. }
  34. }

5. License

MIT Licensed. Copyright (c) TuanTVK 2019.