使用Expo开发React Native应用
React Native入门
https://reactnative.dev/docs/getting-started
什么是Expo
https://docs.expo.dev/versions/latest/
创建第一个react-native应用
使用命令行:
npx create-expo-app your_app_name
如果系统没有安装create-expo-app,会自动进行安装,安装完成提示:
✅ Your project is ready! To run your project, navigate to the directory and run one of the following npm commands. - cd your_app_name - npm run android - npm run ios - npm run web
进行测试
- 安装android环境
安装Android Studio与配置android模拟器
如果出现模拟器启动失败,请参考:https://stackoverflow.com/questions/42848328/android-emulator-not-working-on-mac
- 安装ios环境
本人使用的mac os版本为12.6.3,找到对应的xcode版本进行安装:https://developer.apple.com/download/all/?q=Xcode%2014.2,
安装完成后选择npm run ios,如果出现错误:
Going to the App Store, re-run Expo CLI when Xcode has finished installing.
请参考:https://developer.apple.com/forums/thread/678469 ;
正常运行:
Starting project at /Users/johnny/Documents/work/react_native/your_project_name Starting Metro Bundler › Opening exp://192.168.0.7:8081 on iPhone SE (3rd generation) Downloading the Expo Go app [================================================================] 100% 0.0s ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ █ ▄▄▄▄▄ █ ██▀▀█▀▄▀█ ▄▄▄▄▄ █ █ █ █ █ ▀█ ▀█▀██ █ █ █ █ █▄▄▄█ █▀ █▄▀▀▄██ █▄▄▄█ █ █▄▄▄▄▄▄▄█▄█ ▀▄█▄█▄█▄▄▄▄▄▄▄█ █ █▀▄ ▄▀▀█▄█▄▀▄ ███ ▀▄▄ ▄█ █▀█ ██ ▄█▄ ▄█▀██ ▀ █▄ ▀██ █▀▄▄▀▄█▄▀ █▀▄▀█▄▀▄▀▄▀▀▄ ▀██ ████▄█ ▄▀ ▀ ▄██▄▄▄█▄▀ ▀███ █▄▄▄▄▄▄▄█ ▄ █▄▀▄▄ ▄▄▄ ▀ ▄▄█ █ ▄▄▄▄▄ █▀ ██▀█▀▀ █▄█ ▀▀▀▀█ █ █ █ █▄ ▄▄▀▄ █▄▄ ▄▄▀ █ █ █▄▄▄█ █▀██ ▄ ▄▄██▄▀█▀▀ ██ █▄▄▄▄▄▄▄█▄▄▄█▄▄█████▄▄▄▄▄▄█ › Metro waiting on exp://192.168.0.7:8081 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Using Expo Go › Press s │ switch to development build › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › Press o │ open project code in your editor › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. › Opening the iOS simulator, this might take a moment.