react-native项目

不念不忘少年蓝@ 2023-02-11 08:52 25阅读 0赞

> react-native+react-navigation+redux+redux-saga+axios 项目  
> 前端的这些东西更新换代极快，看了很多博客，感觉内容有些老了，参考意义不大  
> 梳理一下2020年react-native小项目开发过程  
> 这篇博客完成了一个react-native 初始demo的开发

## 1 初始化react-native项目 ##

### 1.1 初始化一个react-native项目 ###

在配置好react-native环境之后，在终端命令行，输入`react-native init your-project-name` 初始化一个项目

react-native init my_demo

注意这一步最好-翻-墙-，保证能稳定访问外网。  
项目初始化时，pod install很容易失败。  
如果失败了，就cd /my\_demo/ios，多次尝试pod install，（注意保证能稳定访问外网），如果只针对Android开发，那就不需要pod install。  
pod install 失败提示如下：  
![pod install 失败提示][pod install]  
\-翻-墙-之后，重新pod install，就可以成功完成，如下：  
![pod install 成功][pod install 1]  
启动项目

#启动ios
    react-native run-ios
    #启动android
    react-native run-android

![run-ios 成功][run-ios]

[pod install]: https://img-blog.csdnimg.cn/20200618114410402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70#pic_center
[pod install 1]: https://img-blog.csdnimg.cn/2020061811474763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70#pic_center
[run-ios]: https://img-blog.csdnimg.cn/20200618115534397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx,size_16,color_FFFFFF,t_70#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactNative进阶（六）：ReactNative语法学习

前言对于第一次接触`ReactNative`的同学，最痛苦的是什么时候使用`{}`，什么时候使用`()`,当然我也经历过那段时间，为此简单总结了下。 `Reac

我会带着你远行/ 2023年01月15日 13:26/ 0 赞/ 405 阅读

相关 ReactNative进阶（三）：ReactNative项目启动原理介绍

文章目录前言概述拓展阅读 -------------------- ![在这里插入图片描述][watermark_typ

╰半夏微凉°/ 2023年01月15日 09:30/ 0 赞/ 408 阅读

相关 ReactNative进阶（二）：ReactNative项目文件结构介绍

文章目录前言优质博文 -------------------- 前言在学习一门新语言，搭建完新项目时，有必要了解下项目结构。

素颜马尾好姑娘i/ 2023年01月15日 08:27/ 0 赞/ 340 阅读

相关 ReactNative阴影

ReactNative阴影 1. 文字阴影 2. 块阴影 2.1 ios阴影 2.2 android阴影 1. 文字阴影文

Myth丶恋晨/ 2022年11月06日 03:57/ 0 赞/ 445 阅读

相关 ReactNative GIF

默认使用GIF图都只会显示第一帧的静态画面。在RN中使用GIF，需要在build.gradle中添加: implementation 'com.facebook.

谁践踏了优雅/ 2022年08月31日 07:11/ 0 赞/ 425 阅读

相关 ReactNative 概述

近期看了下React Native ，整理了下简介支持平台：Native App([IOS][]、[Android][]) 开发语言：[JSX][]、[

Myth丶恋晨/ 2022年08月07日 12:45/ 0 赞/ 437 阅读

相关 ReactNative

[React Native可伸缩列表封装与快速实现方案][React Native] React Native快速封装一个类似qq好友列表的可伸缩列表，一点经验分享

朴灿烈づ我的快乐病毒、/ 2022年06月04日 07:35/ 0 赞/ 600 阅读

相关 reactNative GitAPP 项目初始化

react-native init gitApp 初始化项目然后cd到项目文件，运行命令 react-native run-android start . 命令打开文件

阳光穿透心脏的1/2处/ 2022年05月24日 13:27/ 0 赞/ 303 阅读

相关 ReactNative项目结构介绍

我使用的是webstorm来开发ReactNative项目作为一个初学者，首先要学习一下新建的RN项目的结构 ![ReactNative][] <table> <

淡淡的烟草味﹌/ 2022年05月14日 00:43/ 0 赞/ 388 阅读

相关 ReactNative 升级

> 这里主要记录的是 react native（0.46.4）升级到(0.50.1)的情况。react-native react 之间对应版本关系[链接地址][Link 1]

绝地灬酷狼/ 2022年01月11日 03:15/ 0 赞/ 592 阅读