React-Native：从 ListView 中的列表项中搜索答案

【问题标题】：React-Native: Search from List Items in ListViewReact-Native：从 ListView 中的列表项中搜索
【发布时间】：2018-08-23 19:42:33
【问题描述】：

从Firebase 数据库中检索值或员工姓名。我需要按姓名搜索员工，以便在ListView 上轻松访问他们。例如，如果我输入 'S' ，所有带“S”的员工姓名都应该显示为与ListView一样，这是可触摸的。

帮助我从ListView 中的列表项中实现搜索功能。

class EmployeeList extends Component {
    componentWillMount() {
        this.props.employeesFetch();

        this.createDataSource(this.props);
      }

      componentWillReceiveProps(nextProps) {
        // nextProps are the next set of props that this component
        // will be rendered with
        // this.props is still the old set of props

        this.createDataSource(nextProps);
      }

      createDataSource({ employees }) {
        const ds = new ListView.DataSource({
          rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(employees);
      }

      renderRow(employee) {
        return <ListItem employee={employee} />;
      }



      render() {

        return (
         <View>
         <TextInput 
       style={styles.TextInputStyleClass}
       underlineColorAndroid='transparent'
       placeholder="Quick Search"
        />
          <ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          />
        </View>
        );
      }
    }

    const styles = {
      TextInputStyleClass:{

        textAlign: 'center',
        height: 40,
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 3 ,
        backgroundColor : "#FFFFFF"

        }

  };

    const mapStateToProps = state => {
      const employees = _.map(state.employees, (val, uid) => {
        return { ...val, uid };
      });

      return { employees };
    };

    export default connect(mapStateToProps, { employeesFetch })(EmployeeList);

【问题讨论】：

标签： javascript android listview search react-native

【解决方案1】：

试试这些方法。

在你的州有这些变量

i) 搜索文本（您正在输入的内容）
ii) 一个布尔值，用于了解用户是否正在搜索
iii) 一个用于存储过滤数组的数组

在你的 textinput onTextChange 函数中，检查文本是否为空。

如果为空，则将布尔值设置为false，
否则设置布尔值 true 并根据搜索字符串过滤数组（您可以为此使用 lodash）

在您的列表视图中，根据布尔值呈现数据源。

即）dataSource={isSearching ?过滤数组：this.dataSource}

【讨论】：