使用react native实现带搜索框的侧边菜单

实现带搜索框的侧边菜单可以分为以下几个步骤：

1. 安装依赖
需要使用到 react-navigation、react-native-vector-icons 和 react-native-elements 这三个库，可以使用 npm 或 yarn 进行安装。

2. 创建侧边菜单和搜索框
使用 react-navigation 中的 DrawerNavigator 创建侧边菜单，然后在 DrawerNavigator 的 contentComponent 中添加搜索框。可以使用 react-native-elements 中的 SearchBar 组件来实现搜索框。

3. 处理搜索功能
获取搜索框中的输入值后，可以将其传递给侧边菜单中的列表组件进行筛选。可以使用 FlatList 组件来渲染列表，并在其 renderItem 属性中根据搜索关键字来筛选列表项。

代码实现如下：

import React, { useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { SearchBar } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

const data = [
  { name: 'Apple', price: '$1.99' },
  { name: 'Banana', price: '$0.99' },
  { name: 'Cherry', price: '$2.99' },
  { name: 'Durian', price: '$5.99' },
  { name: 'Elderberry', price: '$3.99' },
];

const SideMenu = ({ navigation }) => {
  const [search, setSearch] = useState('');
  const filteredData = search
    ? data.filter(item => item.name.includes(search))
    : data;

  return (
    <View style={styles.container}>
      <SearchBar
        placeholder="Search"
        onChangeText={setSearch}
        value={search}
        containerStyle={styles.searchBar}
        inputContainerStyle={styles.inputContainer}
        searchIcon={<Icon name="search" size={20} color="gray" />}
      />
      {filteredData.map((item, index) => (
        <Text key={index} style={styles.item}>
          {item.name} ({item.price})
        </Text>
      ))}
    </View>
  );
};

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: SideMenu,
      navigationOptions: {
        title: 'Side Menu',
        drawerIcon: <Icon name="bars" size={20} color="gray" />,
      },
    },
  },
  {
    drawerWidth: 200,
    contentComponent: SideMenu,
  }
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingVertical: 20,
    paddingHorizontal: 10,
  },
  searchBar: {
    backgroundColor: '#fff',
    borderBottomWidth: 0,
    borderTopWidth: 0,
  },
  inputContainer: {
    backgroundColor: '#f2f2f2',
  },
  item: {
    fontSize: 16,
    paddingVertical: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'gray',
  },
});

export default DrawerNavigator;

在上面的代码中，我们先定义了一个 data 数组作为列表数据源，然后使用 useState 定义了一个 search 状态来保存搜索框中的输入值，然后根据 search 的值对列表数据进行筛选。在 SideMenu 组件中，我们使用 SearchBar 组件来实现搜索框，并使用 FlatList 组件来渲染列表。在 FlatList 的 renderItem 属性中，我们对每个列表项进行渲染，并根据 search 的值来筛选列表项。

最后，我们使用 createDrawerNavigator 创建了一个侧边菜单，并将 SideMenu 组件作为 contentComponent 属性传递给 DrawerNavigator，在 SideMenu 组件中，我们渲染了一个带搜索框的列表。