React Native的底部Sheet实现

在React Native中，可以使用react-native-gesture-handler库中的FlatList组件来实现底部Sheet。以下是一个简单的示例代码：

1. 首先，需要安装react-native-gesture-handler库：

npm install react-native-gesture-handler

2. 然后，在代码中引入所需的组件：

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { PanResponder } from 'react-native-gesture-handler';

3. 接下来，定义一个BottomSheet组件：

const BottomSheet = ({ data, renderItem }) => {
  const [panResponder, setPanResponder] = React.useState(null);

  React.useEffect(() => {
    const newPanResponder = PanResponder.create({
      onMoveShouldSetResponder: () => true,
      onMove: (event) => {
        // 在这里处理滑动事件，可以根据需要修改sheet的位置
      },
      onRelease: (event) => {
        // 在这里处理滑动结束事件，可以根据需要修改sheet的位置
      },
    });

    setPanResponder(newPanResponder);

    return () => {
      setPanResponder(null);
    };
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id.toString()}
        panResponder={panResponder}
        style={[styles.flatList, { bottom: panResponder ? panResponder.layout.height : 0 }]}
      />
    </View>
  );
};

4. 最后，在主组件中使用BottomSheet组件：

const App = () => {
  const data = [
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.text}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <BottomSheet data={data} renderItem={renderItem} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: '#fff',
  },
  flatList: {
    width: '100%',
    backgroundColor: '#eee',
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default App;

这个示例代码中，BottomSheet组件使用了FlatList组件来显示数据列表。通过panResponder来处理滑动事件，可以根据需要修改sheet的位置。