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

 

posted @ 2023-10-05 15:03  johnny_zhao  阅读(374)  评论(0编辑  收藏  举报