使用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

 

进行测试

https://expo.dev/client

• 安装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.