React Native的底部Sheet實現(xiàn)

在React Native中，可以使用react-native-gesture-handler庫中的FlatList組件來實現(xiàn)底部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) => {
        // 在這里處理滑動事件，可以根據(jù)需要修改sheet的位置
      },
      onRelease: (event) => {
        // 在這里處理滑動結(jié)束事件，可以根據(jù)需要修改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組件來顯示數(shù)據(jù)列表。通過panResponder來處理滑動事件，可以根據(jù)需要修改sheet的位置。