React Native UIMenu组件使用指南

iOS14 以上的菜单弹出需求,用@react-native-menu/menu会比较优雅,响应也快,UI 也跟系统的保持一致。它其实是封装了原生的UIMenu,你不用自己造轮子,直接写个配置就能弹出操作菜单。体验和系统原生的点击菜单差不多,适配做得蛮细的。

安装也简单,npm install @react-native-menu/menuyarn add @react-native-menu/menu 都行。不过有个小坑——React Native 0.63的版本上编译会出问题。方法是在 [YourProject].xcodeprojLIBRARY_SEARCH_PATHS 里加一行:

"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"

说白了,就是让 Xcode 找到 Swift 库,才能顺利构建。

如果你是还在支持iOS13 及以下的项目,那你就得退回去用 ActionSheet 了。这里有优化版的思路可以看看。

用这个菜单组件的场景挺多的,比如列表项的长按操作、多选后的批量选项,或者你想做个像微信那种“长按头像弹出操作”的体验,都挺合适。

对了,它和 React Native 开发 iOS 的一些底层适配蛮兼容的,想深挖的可以顺着这个方向研究下。

如果你正好在做 iOS14 以上的 React Native App,推荐你试试这个菜单组件,挺省心的。

zip
menu-master.zip 预估大小:85个文件
folder
menu-master 文件夹
folder
ios 文件夹
file
RCTAlertAction.swift 2KB
file
RCTMenuItem.swift 2KB
file
RCTUIMenuManager.swift 427B
file
MenuView.swift 2KB
folder
Menu.xcodeproj 文件夹
file
project.pbxproj 9KB
file
RCTUIMenuManager.m 491B
file
Menu-Bridging-Header.h 95B
file
ActionSheetView.swift 2KB
folder
example 文件夹
folder
ios 文件夹
file
File.swift 56B
folder
MenuExample 文件夹
file
main.m 390B
file
AppDelegate.h 386B
file
AppDelegate.m 2KB
folder
Base.lproj 文件夹
file
LaunchScreen.xib 4KB
folder
Images.xcassets 文件夹
folder
AppIcon.appiconset 文件夹
file
Contents.json 585B
file
Contents.json 63B
file
Info.plist 2KB
file
Podfile 3KB
file
Podfile.lock 16KB
file
MenuExample-Bridging-Header.h 103B
folder
MenuExample.xcodeproj 文件夹
file
project.pbxproj 18KB
folder
xcshareddata 文件夹
folder
xcschemes 文件夹
file
MenuExample.xcscheme 4KB
folder
MenuExample.xcworkspace 文件夹
file
contents.xcworkspacedata 229B
folder
xcshareddata 文件夹
file
IDEWorkspaceChecks.plist 238B
folder
android 文件夹
file
gradlew.bat 3KB
file
gradlew 6KB
file
gradle.properties 933B
folder
app 文件夹
file
proguard-rules.pro 435B
file
debug.keystore 2KB
folder
src 文件夹
folder
main 文件夹
folder
res 文件夹
folder
mipmap-xxxhdpi 文件夹
file
ic_launcher.png 9KB
file
ic_launcher_round.png 15KB
folder
mipmap-hdpi 文件夹
file
ic_launcher.png 3KB
file
ic_launcher_round.png 5KB
folder
values 文件夹
file
strings.xml 75B
file
styles.xml 246B
folder
mipmap-xxhdpi 文件夹
file
ic_launcher.png 6KB
file
ic_launcher_round.png 10KB
folder
mipmap-mdpi 文件夹
file
ic_launcher.png 2KB
file
ic_launcher_round.png 3KB
folder
mipmap-xhdpi 文件夹
file
ic_launcher.png 4KB
file
ic_launcher_round.png 7KB
folder
java 文件夹
folder
com 文件夹
folder
example 文件夹
folder
reactnativemenu 文件夹
file
MainActivity.java 361B
file
MainApplication.java 3KB
file
AndroidManifest.xml 1KB
folder
debug 文件夹
folder
java 文件夹
folder
com 文件夹
folder
example 文件夹
folder
reactnativemenu 文件夹
file
ReactNativeFlipper.java 3KB
file
AndroidManifest.xml 368B
file
build.gradle 9KB
folder
gradle 文件夹
folder
wrapper 文件夹
file
gradle-wrapper.jar 54KB
file
gradle-wrapper.properties 202B
folder
.settings 文件夹
file
org.eclipse.buildship.core.prefs 54B
file
.project 433B
file
settings.gradle 314B
file
build.gradle 1003B
file
package.json 531B
file
app.json 61B
folder
src 文件夹
file
App.tsx 2KB
file
index.tsx 175B
file
yarn.lock 190KB
file
metro.config.js 1KB
file
babel.config.js 311B
folder
android 文件夹
file
gradle.properties 107B
folder
.settings 文件夹
file
org.eclipse.buildship.core.prefs 381B
folder
src 文件夹
folder
main 文件夹
folder
java 文件夹
folder
com 文件夹
folder
reactnativemenu 文件夹
file
MenuModule.kt 625B
file
MenuPackage.kt 689B
file
AndroidManifest.xml 123B
file
.project 435B
file
build.gradle 3KB
file
package.json 3KB
folder
.github 文件夹
file
PULL_REQUEST_TEMPLATE.md 446B
folder
workflows 文件夹
file
ci.yml 3KB
file
CODEOWNERS 15B
file
react-native-menu.podspec 560B
file
LICENSE 1KB
file
CONTRIBUTING.md 8KB
folder
src 文件夹
file
UIMenuView.tsx 319B
folder
__tests__ 文件夹
file
index.test.tsx 25B
file
UIMenuView.ios.tsx 253B
file
types.ts 2KB
file
index.tsx 169B
file
tsconfig.json 703B
file
.gitignore 580B
file
README.md 5KB
file
yarn.lock 420KB
file
.editorconfig 283B
file
.gitattributes 71B
file
babel.config.js 77B
...
zip 文件大小:411.54KB