React Native的側(cè)滑菜單實(shí)現(xiàn)

在React Native中，可以使用第三方庫react-native-gesture-handler和react-native-reanimated來實(shí)現(xiàn)側(cè)滑菜單。下面是一個簡單的側(cè)滑菜單實(shí)現(xiàn)示例：

1. 首先，安裝所需的庫：

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. 然后，創(chuàng)建一個新的React Native項目（如果尚未創(chuàng)建）：

npx react-native init SideMenuExample
cd SideMenuExample

3. 在項目中創(chuàng)建一個名為SideMenu的新文件夾，并在其中創(chuàng)建兩個文件SideMenu.js和SideMenu.js。

4. 在SideMenu.js文件中，編寫以下代碼：

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

const SideMenu = ({ navigation }) => {
  const [panResponder, setPanResponder] = useState(null);
  const [menuVisible, setMenuVisible] = useState(false);

  const toggleMenu = () => {
    setMenuVisible(!menuVisible);
  };

  const panResponderHandler = PanResponder.create({
    onStartShouldSetResponder: () => true,
    onMoveShouldSetResponder: () => true,
    onPanResponderGrant: () => {
      setPanResponder(panResponderHandler);
    },
    onPanResponderRelease: () => {
      setPanResponder(null);
      if (menuVisible) {
        setTimeout(toggleMenu, 300);
      }
    },
  });

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={toggleMenu} style={styles.menuButton}>
        <Text style={styles.menuButtonText}>Menu</Text>
      </TouchableOpacity>
      {menuVisible && (
        <View style={[styles.menu, panResponder && styles.menuPanResponder]}>
          <View style={styles.menuContent}>
            <TouchableOpacity
              onPress={() => {
                setMenuVisible(false);
                navigation.goBack();
              }}
              style={styles.menuOption}>
              <Text style={styles.menuOptionText}>Home</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                setMenuVisible(false);
                navigation.navigate('Settings');
              }}
              style={styles.menuOption}>
              <Text style={styles.menuOptionText}>Settings</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  menuButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  menuButtonText: {
    color: '#fff',
    fontSize: 16,
  },
  menu: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuContent: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 20,
    borderRadius: 10,
  },
  menuOption: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  menuOptionText: {
    fontSize: 16,
  },
  menuPanResponder: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
});

export default SideMenu;

5. 最后，在App.js文件中引入并使用SideMenu組件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SideMenu from './SideMenu';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
      <SideMenu navigation={navigation} />
    </NavigationContainer>
  );
};

export default App;

現(xiàn)在，您應(yīng)該可以在模擬器或?qū)嶋H設(shè)備上運(yùn)行應(yīng)用程序，并看到一個可以滑動打開的側(cè)滑菜單。