General page for single/multiple select/show with single/multiple data level.
npm install react-native-picklist

This is a picklist page. It supports:
* Single Level or Multiple Level data.
* Single Select or Multiple Select.
* Show or Hide the internal components.
* Customize the UI component.
* Search in the data automaticlly.
* Section style page.


Same UI on Android.
Install by Yarn:
``shell`
yarn add react-native-picklist
Install by NPM:
`shell`
npm install --save react-native-picklist
Import the module in the file:
`jsx
import PickList from 'react-native-picklist';
export default class TopPage extends React.PureComponent {
static navigationOptions = PickList.navigationOptions;
render() {
return (
/>
);
}
}
`
If you want to use button in navigationOptions, you should set following items:
`javascript
import { HeaderButton } from 'react-navigation-header-buttons';
HeaderButton.defaultProps.getButtonElement = (props) => {
const {title} = props;
return (
{title}
);
};
`
You can set the following properties or see example project to learn how to use it.
Required:
* title: Page title.data
* : Data to show. We will construct a virtual root node to contain it.navigation
* : Navigator's props.
Optional:
* firstTitleLine: First item displayed in TitleLine when it has the multi-level data and show the title line.isCascade
* : When multi-level and multi-select are true, auto-cascading selects child nodes or not. Default is true.multilevel
* : Has multi-level data or not. Default is false.multiselect
* : Is multi-select or not. Default is false.onFinish
* : Pass the selected items when finish selecting.rightTitle
* : Button title on the right corner.rightClick
* : Button click callback on the right corner.renderRow
* : Customize a row display. You can override this property to make the list readonly. Default implement is in DefaultRow.js.renderHeader
* : Customize header of page.renderSingleSelectIcon
* : Customize single-selected icon.renderMultiSelectIcon
* : Customize multi-selected icon.showBottomView
* : Show bottom bar or not.showSearchView
* : Show search bar or not.showTitleLine
* : Show title line at the header or not.showAllCell
* : Show select all or deselect all cell or not.showCount
* : Show not leaf item's children count and selected count.numberOfTextLines
* : Max number of lines of Text component in one row. Default is 0, means no restrict of lines. You can set to 1 for single line text mode.directBackWhenSingle
* : Directly go back to previous page or not when single-select data.cancelableWhenDirectBack
* : Selected item is cancelable or not when single-select data and directBackWhenSingle is true.selectedIds
* : Initial selected item's identifier list.selectable
* : Can a tree node selectable or not.childrenKey
* : Children key of tree node.idKey
* : Identifier key of tree node, supports array of string or one string only.labelKey
* : Label key of tree node.searchKeys
* : Normal search keys of tree node.sort
* : Sort method for data list.split
* : Split method when generate sections of data list.flatListProps
* : Props of FlatList when data is flat.sectionListProps
* : Props of SectionList when data is splitted to sections.searchListProps
* : Props of FlatList when searching.buttonProps
* : Props of HeaderButton in navigation bar.labels
* : Label text in component.
You can change labels globally by following statement:
`javascript`
PickList.defaultProps.labels.xxx = 'xxx';
You can call function with PickList view reference:
`javascript
...
/>
this.picklist.xxx();
`
Following functions supported:
* getSelectedItems: () => Tree[]: Get current selected items. You can handle these with Tree API.backToPreviousPage: () => boolean
* : Auto go back to previous page. If it is the first page, it returns false. Otherwise it returns true.
You can open the example project by following steps:
1. Enter example. Use yarn or npm install to install the modules. Run npm start in a seperate terminal.index
1. Create a example project with entry file and module name test`.