Question

从Firebase数据库中检索值或员工姓名。我需要按名称搜索员工，以便在ListView上轻松访问这些员工。例如，如果我键入＆＃39; S＆＃39; ，所有员工姓名与＆＃34; S＆＃34;应显示与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，
else设置布尔值为true并根据搜索字符串过滤数组（你可以使用lodash）

在列表视图中，根据布尔值渲染dataSource。

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

React-Native：从ListView

1 个答案: