搜索栏 React Native

Question

我需要为我的应用创建搜索栏。我目前正在使用react-native-material-ui,this，但我有问题。

1- 它会导致真实设备上的延迟。

2- 我如何在“搜索栏”中搜索项目。我的渲染方法上有这段代码：

<View style={{marginBottom: 50}}>
    <ThemeProvider uiTheme={uiTheme}>
        <Toolbar uiTheme={uiTheme}
                 leftElement="arrow-back"
                 onLeftElementPress={() => goBack()}
                 centerElement={params.tapName}
                 searchable={{
                       autoFocus: true,
                       placeholder: 'Search',
                       onChangeText: (text) => {    
                               this.setState({currentSearch: text});
                               for (var i = 0; i < this.state.brands.length; i++) {  
if(this.state.brands[i].name.search(text) != -1)                            
     console.warn(this.state.brands[i].name);}},
                                }}
                              />
       </ThemeProvider>
    </View>

我可以找到品牌的名称，但无法过滤和呈现它们。如果您知道如何呈现这些过滤的项目，或者知道更好的搜索栏，我正在等待您的答案。

Answer 1

将onChangeText 替换为

onChangeText={(text) => this.searchItem({text})}

并添加一个函数searchItem 并将您的搜索逻辑放入此函数中。

searchItem(text) {
        for (var i = 0; i < this.state.brands.length; i++) {  
            if(this.state.brands[i].name.search(text) != -1)                            
                console.warn(this.state.brands[i].name);
        }
}

编辑

我正在使用两个状态变量：initialData 和 filteredData。在初始状态下，我已将主要源数据分配给两个变量。

将filteredData 用作datasource。一旦用户搜索比较text 和initialData。如果您有匹配的结果，则创建一个数组并使用该结果更新filteredData。

如果要清除过滤结果，请将主源initialData 分配给filteredData。

希望对你有帮助。