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

Question

从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);

Answer 1

尝试这些方法。

在您的状态下有这些变量

i）搜索文字（您要输入的文字）
ii）一个布尔值，用于知道用户是否正在搜索
iii）用于存储过滤后的数组的数组

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

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

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

即）dataSource = {isSearching吗？ filteredArray：this.dataSource}