编写代码,使用react native 中的Searchbar组件实现搜索页面
时间: 2023-06-10 19:05:57 浏览: 308
react-native-search-box:一个简单的带有动画的搜索框,其灵感来自ios搜索栏。 轻巧,快速,灵活
好的,以下是一个简单的搜索页面,使用了React Native中的SearchBar组件:
```javascript
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SearchBar } from 'react-native-elements';
const SearchPage = () => {
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
// 处理搜索逻辑
console.log('Searching for:', searchValue);
}
return (
<View style={styles.container}>
<SearchBar
placeholder="Type Here..."
onChangeText={setSearchValue}
onSubmitEditing={handleSearch}
value={searchValue}
/>
<Text style={styles.text}>Search results will be displayed here.</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
marginTop: 20,
fontSize: 18,
},
});
export default SearchPage;
```
在这个示例中,我们使用了React Native Elements库中的SearchBar组件。当用户在搜索栏中输入内容时,我们使用useState钩子来跟踪搜索值。我们还使用onChangeText和onSubmitEditing属性来更新搜索值和处理搜索逻辑。最后,我们在页面中显示搜索结果。
阅读全文