ReactNative入门教程-项目结构解析及HelloWorld

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: ReactNative入门教程-项目结构解析及HelloWorld

今天我们从历史传统“Hello World”开始。

首先创建一个项目, 指定创建0.55.4的版本



react-native init rndemo --version 0.55.4

进入项目中,使用命令yarn install 安装依赖



微信图片_20220609115749.png

等待安装完成之后,进入项目根目录,使用如下命令运行到iOS或Android模拟器上,即可看到下面的画面,就表示运行项目成功了

react-native run-ios or run-android

微信图片_20220609115916.png

项目的目录结构如下:


微信图片_20220609115944.png

咱们接下来逐一解释一下目录结构的组成部分:


项目结构解析


  • android: Android的原生开发文件目录,用Android Studio打开项目就是打开这个文件进行原生开发
  • ios: IOS原生开发目录,使用Xcode打开进行原生开发
  • node_modules: 使用“npm install”或者“yarn install”,根据项目中package.json配置自动生成的项目依赖库
  • .babelrc: Babel的配置文件,Babel是一个广泛使用的转码器,主要用来将ES6代码转为ES5代码,从而在现有环境执行。babelrc用来设置转码规则和插件。
  • .buckconfig: buck的配置文件,buck是Facebook推出的一款高效率的App项目构建工具。
  • .flowconfig: Flow 是 Facebook 旗下一个为 JavaScript 进行静态类型检测的检测工具。它可以在 JavaScript 的项目中用来捕获常见的 bugs,比如隐式类型转换,空引用等等。
  • .gitattributes: git属性文件设定一些项目特殊的属性。比如要比较word文档的不同;对strings程序进行注册;合并冲突的时候不想合并某些文件等等。
  • .gitignore: 用来配置git提交需要忽略的文件。
  • .watchmanconfig: 用于监控bug文件和文件变化,并且可以出发指定的操作。
  • App.js:就是编写代码的地方,稍后“hello world”就是在这里进行修改。
  • app.json: 配置了name和displayName,不过没发现在哪里使用到了。(待研究。。)
  • index.js: iOS和Android项目的统一入口文件,可以在android的MainApplication中的ReactNativeHost中重写getJSMainModuleName()方法更改; 在Ios的AppDelegate.m文件的didFinishLaunchingWithOptions方法中通过jsBundleURLForBundleRoot可以更改入口文件。
  • package.json: package.json定义了项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
  • yarn.lock: Yarn 是 一个由 Facebook 创建的新 JavaScript 包管理器;每次添加依赖或者更新包版本,yarn都会把相关版本信息写入yarn.lock文件。这样可以解决同一个项目在不同机器上环境不一致的问题。


Hello World


微信图片_20220609120019.png

修改App.js文件如下:

微信图片_20220609120101.png

现在我们已经完成了Hello world, 是不是很简单呢?


知识点


  • JSX javascript语法糖
  • ES6
  • 组件(Component):

上面的代码定义了一个名为HelloWorldApp的新的组件(Component)。你在编写 React Native 应用时,肯定会写出很多新的组件。而一个 App 的最终界面,其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的 JSX 语句



目录
相关文章
|
前端开发 JavaScript 数据库
Django系列:Django的项目结构与配置解析
本文讲解Django的项目结构与配置
218 0
|
11天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
39 2
|
1月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
70 0
|
1月前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
57 0
|
1月前
|
存储 Java C++
Collection-PriorityQueue源码解析
Collection-PriorityQueue源码解析
62 0
|
1月前
|
安全 Java 程序员
Collection-Stack&Queue源码解析
Collection-Stack&Queue源码解析
84 0
|
11天前
|
存储 安全 Linux
Golang的GMP调度模型与源码解析
【11月更文挑战第11天】GMP 调度模型是 Go 语言运行时系统的核心部分,用于高效管理和调度大量协程(goroutine)。它通过少量的操作系统线程(M)和逻辑处理器(P)来调度大量的轻量级协程(G),从而实现高性能的并发处理。GMP 模型通过本地队列和全局队列来减少锁竞争,提高调度效率。在 Go 源码中,`runtime.h` 文件定义了关键数据结构,`schedule()` 和 `findrunnable()` 函数实现了核心调度逻辑。通过深入研究 GMP 模型,可以更好地理解 Go 语言的并发机制。
|
24天前
|
消息中间件 缓存 安全
Future与FutureTask源码解析,接口阻塞问题及解决方案
【11月更文挑战第5天】在Java开发中,多线程编程是提高系统并发性能和资源利用率的重要手段。然而,多线程编程也带来了诸如线程安全、死锁、接口阻塞等一系列复杂问题。本文将深度剖析多线程优化技巧、Future与FutureTask的源码、接口阻塞问题及解决方案,并通过具体业务场景和Java代码示例进行实战演示。
40 3
|
1月前
|
存储
让星星⭐月亮告诉你,HashMap的put方法源码解析及其中两种会触发扩容的场景(足够详尽,有问题欢迎指正~)
`HashMap`的`put`方法通过调用`putVal`实现,主要涉及两个场景下的扩容操作:1. 初始化时,链表数组的初始容量设为16,阈值设为12;2. 当存储的元素个数超过阈值时,链表数组的容量和阈值均翻倍。`putVal`方法处理键值对的插入,包括链表和红黑树的转换,确保高效的数据存取。
56 5
|
1月前
|
Java Spring
Spring底层架构源码解析(三)
Spring底层架构源码解析(三)
113 5

推荐镜像

更多
下一篇
无影云桌面