@abdulmatinsanni/react-native-picklist 中文文档教程

Question

react-native-picklist

这是一个选择列表页面。 它支持：

• 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.

ScreenShots

Android 上的相同 UI。

Install

通过 Yarn

yarn add @abdulmatinsanni/react-native-picklist

安装： 通过 NPM 安装：

npm install --save @abdulmatinsanni/react-native-picklist

Usage

在文件中导入模块：

import PickList from "react-native-picklist";

export default class TopPage extends React.PureComponent {
  static navigationOptions = PickList.navigationOptions;

  render() {
    return (
      <PickList
      // ...
      />
    );
  }
}

如果您想在 navigationOptions 中使用按钮，您应该设置以下项目：

import { HeaderButton } from "react-navigation-header-buttons";

HeaderButton.defaultProps.getButtonElement = props => {
  const { title } = props;
  return <Text>{title}</Text>;
};

您可以设置以下属性或查看示例项目以了解如何使用它。

Properties

必需：

• title: Page title.
• data: Data to show. We will construct a virtual root node to contain it.
• navigation: Navigator's props.

可选：

• 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.

您可以通过以下语句全局更改标签：

PickList.defaultProps.labels.xxx = "xxx";

您可以使用 PickList 视图引用调用函数：

<PickList
    ref={this.picklist = ref}
    ...
/>

this.picklist.xxx();

支持以下功能：

• 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.

Example Project

您可以通过以下步骤打开示例项目：

1. Enter example. Use yarn or npm install to install the modules. Run npm start in a seperate terminal.
2. Create a example project with entry file index and module name test.