时间戳

首页 > 解决方案 > 仅在 ReactNative Flat List 中显示过滤的项目

react-native - 仅在 ReactNative Flat List 中显示过滤的项目

问题描述

当用户导航到屏幕（假设屏幕 A）时，我从 API 获取用户数据并将它们显示在平面列表中。在这个视图中有一个搜索栏。当用户搜索名称（以查找联系电话）时，它会从平面列表中过滤数据。有用。但我还有另一个要求。我不仅需要从列表中进行搜索，还需要在电话联系人中进行搜索。假设人 A 在搜索栏上搜索名称“Rahul”。如果平面列表中有任何名称匹配（显示来自 API 的数据），我想显示这一点，如果此名称存储在电话联系人中，我还需要显示“Rahul”的联系方式。所以我所做的是，我使用了两个平面列表（比如说 FlatList A 和 FlatList B，FlatList A- API 数据 | Flat List B- 电话联系数据）。一个显示 API 数据，另一个显示电话联系人数据。但我的问题是当用户搜索姓名并清除文本时，电话联系人的所有记录都显示平面列表。我只想在平面列表（平面列表B）中显示电话联系人的项目，而不是显示所有电话联系人。这是我尝试过的。

class UsersListScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        data:[],
        phContacts:[],


    };
    this.usersData= [];
    this.phoneContactData =[];

}

componentDidMount(){
   this.props.getUsersData();
   this.getPhoneContacts();
}

componentDidUpdate(previousProps){
    if(previousProps.usersList != this.props.usersList){
        this.setState({data:this.props.usersList})

    }
}

getPhoneContacts(){
    if (Platform.OS === "android") {
        PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
            {
              'title': 'Contacts',
              'message': 'This app would like to access your contacts.'
            }
          ).then(() => {
            Contacts.checkPermission((err, permission) => {
              if (err) throw err;

              if (permission === 'undefined') {
                Contacts.requestPermission((err, permission) => {
                })
              }
              if (permission === 'authorized') {
                Contacts.getAll((err, contacts) => {
                    this.usersData = this.props.usersList
                    this.phoneContactData = contacts
                })
              }
              if (permission === 'denied') {
                console.log('denied')
              }
            })
          })
    }
}

//Search Filter
searchFilter =text=>{

    const filteredData = this.usersData.filter(item => {  
        const itemData = `${item.userName.toUpperCase()}`;
        const textData = text.toUpperCase();
                return itemData.indexOf(textData) > -1;    
        }); 

    this.setState({ data: filteredData });  

    const filteredPhoneContactData = this.phoneContact.filter(item=>{
        const itemData2 = `${item.displayName.toUpperCase()}`;
        const textData = text.toUpperCase();

          return itemData2.indexOf(textData) > -1;  

        });
        this.setState({ phContacts: filteredPhoneContactData });  
}


render() {
    return (
        <View style={styles.mainContainer}>

            <TextInput 
            style={styles.searchInputStyle}
            placeholder="Search user"
            onChangeText={text=>this.searchFilter(text)}
            />
            </View>  
            {this.state.isLoading ?
                <ActivityIndicator size="large" color="#0000ff" /> :
                <FlatList  
                keyExtractor={(item, index) => index.toString()}
                data={this.state.data}
                renderItem={this.renderItem}/>  
            }

            {this.state.phContacts ? 
            <FlatList  

                                data={this.state.phContacts}
                                renderItem={this.renderContacts}

            /> : null}

        </View>

    );
}

}

标签： react-nativereact-native-flatlist

解决方案

如果输入清晰，则不要呈现平面列表 B。

{
(this.state.phContacts && !inputText) ? 
  <FlatList  
    data={this.state.phContacts}
    renderItem={this.renderContacts}
  /> 
  :
  null
}

但是由于您没有将输入查询保持在状态，因此只需在输入为空时清除列表

searchFilter = text => { 
  if(!text) {
    this.setState({phContacts: [], data: []});
    return;
  }
  ...
  ...
}

推荐阅读