如何在FLatList react native中实现Sraech bar

import React, { useState } from 'react';
import { View, TextInput, FlatList, Text } from 'react-native';

const data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  // 其他数据项...
];

const SearchScreen = () => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const renderItem = ({ item }) => {
    if (item.name.toLowerCase().includes(searchKeyword.toLowerCase())) {
      return (
        <View style={{ padding: 10 }}>
          <Text>{item.name}</Text>
        </View>
      );
    }
    return null;
  };

  return (
    <View style={{ flex: 1 }}>
      <TextInput
        style={{ height: 40, borderWidth: 1, margin: 10, padding: 10 }}
        placeholder="Search"
        onChangeText={text => setSearchKeyword(text)}
      />
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};

export default SearchScreen;