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}