2021-04-04 - React Native - 学习/实践

雨点打透心脏的1/2处 2022-10-22 07:34 4阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于使用react native开发跨平台App</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> <img alt="" src="https://img-blog.csdnimg.cn/img_convert/b15ab4ee9b3c22f603ea4af600cfbf6b.png"> 这里开发环境： Mac pro 2019 &nbsp; 1.文档阅读 <a href="https://www.jianshu.com/p/c288f0a246ae" rel="nofollow">https://www.jianshu.com/p/c288f0a246ae</a>&nbsp;//&nbsp;如何开发一个适配Android和iOS双平台的React Native应用 <a href="https://time.geekbang.org/column/article/101268" rel="nofollow">https://time.geekbang.org/column/article/101268</a>. //&nbsp;Flutter和React Native，应该选哪个？ <a href="https://reactnative.cn/docs/intro-react-native-components" rel="nofollow">https://reactnative.cn/docs/intro-react-native-components</a>&nbsp; // react native 中文网 <a href="https://github.com/search?q=react+native+video" rel="nofollow">https://github.com/search?q=react+native+video</a>&nbsp;// react native video&nbsp; <a href="https://github.com/react-native-video/react-native-video" rel="nofollow">https://github.com/react-native-video/react-native-video</a> <a href="https://github.com/itsnubix/react-native-video-controls" rel="nofollow">https://github.com/itsnubix/react-native-video-controls</a> <a href="https://github.com/ivpusic/react-native-image-crop-picker" rel="nofollow">https://github.com/ivpusic/react-native-image-crop-picker</a> <a href="https://reactnative.cn/docs/environment-setup" rel="nofollow">https://reactnative.cn/docs/environment-setup</a>&nbsp; &nbsp;// 搭建开发环境 &nbsp; 视频教程 <a href="https://www.bilibili.com/video/BV1HD4y127fR" rel="nofollow">https://www.bilibili.com/video/BV1HD4y127fR</a>&nbsp; //&nbsp;全网首发】最全最细的公开『React Native』实战课程【免费学到爆】 &nbsp; &nbsp; 2.整理输出 2.1 搭建开发环境 
 <table> 
 <tbody> 
 <tr> 
 <td> Note： 请认真参考中文文档，一步一步操作即可。 如果失败，可以多试一次～ &nbsp; <a href="https://reactnative.cn/docs/environment-setup" rel="nofollow">https://reactnative.cn/docs/environment-setup</a> &nbsp;// 搭建开发环境 <a href="https://www.bilibili.com/video/BV1HD4y127fR?p=2&amp;spm_id_from=pageDriver" rel="nofollow">https://www.bilibili.com/video/BV1HD4y127fR?p=2&amp;spm_id_from=pageDriver</a>&nbsp; // 视频教程 &nbsp; 过程【部分】如下： 安装watchman <img alt="" height="469" src="https://img-blog.csdnimg.cn/2021040423480124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="732"> &nbsp; <img alt="" height="452" src="https://img-blog.csdnimg.cn/20210404234820788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="706"> &nbsp; 切换npm镜像源 
 <blockquote> 
 # 使用nrm工具切换淘宝源 npx nrm use taobao 
 # 如果之后需要切换回官方源可使用 npx nrm use npm 
 </blockquote> <img alt="" height="403" src="https://img-blog.csdnimg.cn/202104061258383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="629"> &nbsp; 安装cocoapods <img alt="" height="460" src="https://img-blog.csdnimg.cn/20210406130623673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="719"> &nbsp; 初始化项目 
 <blockquote> 
 npx react-native init AwesomeProject 
 </blockquote> <img alt="" height="693" src="https://img-blog.csdnimg.cn/2021040613141336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="704"> <img alt="" height="739" src="https://img-blog.csdnimg.cn/20210407164001545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="733"> 由上可初步知： 安装成功～～ &nbsp; 构建App &nbsp; <img alt="" height="687" src="https://img-blog.csdnimg.cn/20210407164437367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="897"> &nbsp; <img alt="" height="632" src="https://img-blog.csdnimg.cn/20210407164547332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="892"> &nbsp; iOS效果如下：// 其中也有修改App.js <img alt="" height="1174" src="https://img-blog.csdnimg.cn/20210407164643748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="570"> &nbsp; 项目目录： <img alt="" height="619" src="https://img-blog.csdnimg.cn/20210407164752141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="998"> &nbsp; 到此，First Demo App 完毕～ </td> 
 </tr> 
 </tbody> 
 </table>&nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://www.jianshu.com/p/c288f0a246ae" rel="nofollow">https://www.jianshu.com/p/c288f0a246ae</a>&nbsp;//&nbsp;如何开发一个适配Android和iOS双平台的React Native应用 <a href="https://time.geekbang.org/column/article/101268" rel="nofollow">https://time.geekbang.org/column/article/101268</a>. //&nbsp;Flutter和React Native，应该选哪个？ <a href="https://reactnative.cn/docs/intro-react-native-components" rel="nofollow">https://reactnative.cn/docs/intro-react-native-components</a>&nbsp; // react native 中文网 <a href="https://github.com/search?q=react+native+video" rel="nofollow">https://github.com/search?q=react+native+video</a>&nbsp;// react native video&nbsp; <a href="https://github.com/react-native-video/react-native-video" rel="nofollow">https://github.com/react-native-video/react-native-video</a> <a href="https://github.com/itsnubix/react-native-video-controls" rel="nofollow">https://github.com/itsnubix/react-native-video-controls</a> <a href="https://github.com/ivpusic/react-native-image-crop-picker" rel="nofollow">https://github.com/ivpusic/react-native-image-crop-picker</a> </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...