RN入门基础1：第一个RN项目-hello World

1.新建工程，用webStorm创建一个react native项目

首先打开package.json,

因为webstorm会创建rn项目时会下载最新的react-native，所以运行程序到模拟器上，经常会出现各种红屏，

所以，将package.json的内容替换如下（里面是稳定版本的react-native和react-native cli）

{"name": "myprojectname","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","test": "jest"},"dependencies": {"react": "16.3.1","react-native": "0.55.4"},"devDependencies": {"babel-jest": "23.4.0","babel-preset-react-native": "4.0.0","jest": "23.4.1","react-test-renderer": "16.3.1"},"jest": {"preset": "react-native"}
}

然后点击左下角的install

有问题请参考

2.配置文件package.json,程序入口代码文件App.js和index.js

基本代码分为四部分

1）组件导入区： 所有用到的组件都需要事先进行导入，包括样式也需要进行导入
2）核心代码区： 所有逻辑代码编写的地方
3）组件样式区： render方法中返回一些用于渲染结构的JSX语句，render() 方法中用到的组件在这里编写
4）注册启动组件： 组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

注册并启动组件在index.js文件中，index是 Android 手机和 iOS 手机上程序开始的入口

代码解释：

定义了一个名为 myprojectname 的新的组件（Component），

并且使用了名为 AppRegistry 的内置模块进行了“注册”操作

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。

AppRegistry.registerComponent这个方法只会调用一次。只需整个复制到index.ios.js或是index.android.js

效果展示：

RN入门基础1：第一个RN项目-hello World相关推荐

学习C++：C++进阶（三）CMake基础篇---用一个小型项目了解CMake及环境构建
V1.1 于2022年7月15日第二次修改:添加了比较多的解释图,解读了各类库的CMakelist.txt文件目录第一部分基础篇(Basics) 1.0 本部分主要学什么(Intro) 1.1 ...
RN入门基础3：JSX动态布局之自定义属性state
一.介绍一个组件有两种属性控制:props(控制静态数据)和state(控制动态数据). props用于需要静态数据(它在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变). sta ...
Oracle-SQL语法基础【以一个完整项目为例】
--log in conn / as sysdba; show user; conn /as sysdba 无需密码直接可以连接 SYS用数据库的超级用户,数据库内很多重要的东西(数据字典表.内置包. ...
NSubstitute完全手册（一）入门基础
NSubstitute入门最简单的入门方式就是创建一个测试项目,并将 NSubstitute 引用到其中.可以通过 NuGet 或 OpenWrap 来获取 NSubstitute 包.也可以直接下 ...
PHP简单入门基础知识
PHP简单入门基础知识作为一个web前端开发者第一天开始学php,整理的以下笔记,笔记并不完善,只是自我觉得和html,js有差别的地方做了下入门笔记 PHP 变量规则: 变量以 $ 符号开头,其后 ...
我的第一个 RN 项目-趣闻
代码地址如下: http://www.demodashi.com/demo/13486.html 项目预览 IOS: Android: 扫描体验: 或者点我整体功能跟之前小程序和 Android 项 ...
python入门004～创建属于自己的第一个python3项目～基础知识的讲解
上一节带领大家成功的安装了pthon3,并且在开发者工具pycharm里配置了python,这一节就开始带领大家学习python3的基础知识了. 如果你还没有安装python3,也没有安装开发者工具p ...
Kotlin基础入门 - 创建、兼容一个属于自己的Kotlin项目
这应该是我年前就想记录的一个基础入门,但是因为一直比较忙,当时只是做了一个备忘草稿,正文就拖到了现在,趁着有时间,赶紧来帮助一下新入行的朋友- 关于为何我把这篇Blog叫做创建.兼容一个属于自己的K ...
WPF入门教程系列(一) 创建你的第一个WPF项目
WPF基础知识快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知识(或者其他.NET支持的语言):这个是当然的了,虽 ...

RN入门基础1：第一个RN项目-hello World

RN入门基础1：第一个RN项目-hello World相关推荐

最新文章

热门文章