1.应用场景

主要用于使用react native开发跨平台App

2.学习/操作

这里开发环境:

Mac pro 2019

 

1.文档阅读

https://www.jianshu.com/p/c288f0a246ae // 如何开发一个适配Android和iOS双平台的React Native应用

https://time.geekbang.org/column/article/101268. // Flutter和React Native,应该选哪个?

https://reactnative.cn/docs/intro-react-native-components  // react native 中文网

https://github.com/search?q=react+native+video // react native video 

https://github.com/react-native-video/react-native-video

https://github.com/itsnubix/react-native-video-controls

https://github.com/ivpusic/react-native-image-crop-picker

https://reactnative.cn/docs/environment-setup   // 搭建开发环境

 

视频教程

https://www.bilibili.com/video/BV1HD4y127fR  // 全网首发】最全最细的公开『React Native』实战课程【免费学到爆】

 

 

2.整理输出

2.1 搭建开发环境

Note:

请认真参考中文文档,一步一步操作即可。

如果失败,可以多试一次~

 

https://reactnative.cn/docs/environment-setup  // 搭建开发环境

https://www.bilibili.com/video/BV1HD4y127fR?p=2&spm_id_from=pageDriver  // 视频教程

 

过程【部分】如下:

安装watchman

 

 

切换npm镜像源

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

 

安装cocoapods

 

初始化项目

npx react-native init AwesomeProject

由上可初步知:

安装成功~~

 

构建App

 

 

 

iOS效果如下:// 其中也有修改App.js

 

项目目录:

 

到此,First Demo App 完毕~

 

 

 

后续补充

...

3.问题/补充

TBD

4.参考

https://www.jianshu.com/p/c288f0a246ae // 如何开发一个适配Android和iOS双平台的React Native应用

https://time.geekbang.org/column/article/101268. // Flutter和React Native,应该选哪个?

https://reactnative.cn/docs/intro-react-native-components  // react native 中文网

https://github.com/search?q=react+native+video // react native video 

https://github.com/react-native-video/react-native-video

https://github.com/itsnubix/react-native-video-controls

https://github.com/ivpusic/react-native-image-crop-picker

后续补充

...

 

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐