Suggest

搜索提示组件 Author: qingguo.xu

Install

qnpm install @qnpm/react-native-ui-suggest

该组件被完全重写，已被升级到 4.0.0 版本，请确保项目 package.json 下的版本为 ^4.x.x

Props

Prop Type Default Required Description
style View.propTypes.style 组件的样式
textInputStyle TextInput.propTypes.style 输入框的样式
recommend array [] 推荐内容数据，当前没有任何输入时显示
data array [] 结果区域渲染的内容数据，有输入内容时显示
isShowSearchIcon bool true 是否在输入区域前显示搜索图标
throttleGap number 300 文本框的 onChangeText 事件的触发频率,默认每 300ms 一次
defaultValue string '' 输入框显示的默认内容
placeholder string '' 输入框显示的提示内容，该提示会在输入字段为空时显示。
onChangeText func () => {} 输入区内容改变时的回调函数
onItemTap func () => {} 点击结果区域的某行内容时的回调，参数为当前点击的索引
onCancelButtonTap func () => {} 点击取消按钮时的回调
renderCancelButton func 自定义取消按钮的渲染函数
renderRow func 自定义每行渲染的回调函数
noDataTmpl func null 没有对应搜索结果时显示的内容
resultTmpl func 替换组件内部默认的结果渲染区域的内容，默认采用 QRN 的 ScrollView 组件渲染

onChangeText 接受的参数：

  • text: {string} 输入框的内容

onItemTap 接受的参数：

  • index: {number} 当前点击选项在数据中的索引

renderRow 接受的参数:

  • item: 当前渲染的数组中的某一项
  • index: {number} 当前渲染项在数组中的索引
  • len: {number} 当前渲染的数组的长度

resultTmpl 组件接受的 props：

  • this.props.recommend：Suggest 组件接受的 recommend 属性
  • this.props.data：Suggest 组件接受的 data 属性
  • this.props.showData：当前是否应该显示 this.props.data 属性的数据

另外，当输入区内容变换时，结果区域的内容会通过调用传入的 resultTmpl 组件实例的 scrollTo({ y: 0 }) 返回到顶部。 所以，外部传入的 resultTmpl 的组件需要支持 scrollTo 方法。如果没有，则需要在 onChangeText 回调中处理。 ** 当传入 resultTmpl 属性时，Suggest 组件的 noDataTmpl 属性没有作用。

Method

clearInput() 清空当前输入

Example:


import React, {Component} from 'react';

import Suggest from '@qnpm/react-native-ui-suggest';

class SuggestDemo extends Component {
  constructor(props) {
    super(props);
    const results = new Array(500).fill(0).map(() => parseInt(Math.random() * 10));
    this.state = {
      results
    };
  }

  onChangeText(val) {
    const results = new Array(500).fill(0).map(() => parseInt(Math.random() * 1000));
    this.setState({
      results
    });
  }

  render() {
    const { results } = this.state;
    return (
      <Suggest
        recommend={results}
        data={results}
        onChangeText={val => this.onChangeText(val)}
        placeholder="xxx"
      />
    )
  }
}
SliderMenu
Tooltip