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。

希望它可以帮到你。

搜索栏React Native

1 个答案: