当前位置: 首页 > news >正文

编写第一个 React Native 程序

React Native 目录

使用React Native CLI命令创建的目录如下图所示:
在这里插入图片描述
重要目录说明

目录说明
__tests__存放测试用例的目录
.bundle / config配置文件(一般不会用到)
android 和 IOS 文件夹这两个文件夹主要是存放安卓和 ios 相关的配置文件和打包配置文件
android / build.gradle主要是记录了设备支持 SDK 的最低版本、模板设备的版本、依赖插件,当我们需要添加依赖插件时,就可以添加在这个文件中
android / gradle.properties可以做一些 Gradle 文件的全局性配置,也可以存放一下比较私密的信息在里面
android / app / src / mainapp.js 会链接这两个文件,把应用相关的参数提取到框架中
ios / Podfile依赖项配置信息都在这里,系统运行时都会把相关依赖进行安装
.gitignore配置 git 提交时需要忽略的文件
.prettierrc.js代码格式化配置
.watchmanconfigWatchman 用于监控文件变化,辅助实现工程修改所见即所得
GemfileWatchman 用于监控文件变化,辅助实现工程修改所见即所得
index.jsAPP 渲染的总入口,他们会把相关的 APP 配置信息和根级组件渲染出来

重写 APP.tsx 文件

我们首先在APP.tsx文件中编写一个 Hello World!的内容。从这个内容中我们可以首先了解到如下三个组件:

组件说明
View相当于 HTML 中的 Div 元素,相当于一个容器
Text相当于 HTML 中的 P 元素,展示文本内容
SafeAreaView安全区,主要是因为手机中有一些凹陷的部分(例如刘海屏的手机),安全区是不带有这些凹陷部分

具体实例

import React from "react";
import { SafeAreaView, Text, View } from "react-native";const App: React.FC = () => {return (<SafeAreaView><View><Text>Hello World !</Text></View></SafeAreaView>);
};export default App;
http://www.lryc.cn/news/121514.html

相关文章:

  • AI:03-基于深度神经网络的低空无人机目标检测图像识别的研究
  • Arcgis将一个shp依照属性表导出为多个shp
  • LeetCode.26,27,88三题-双指针的运用
  • 【Django】招聘面试管理01 创建项目运行项目
  • C# 数据类型
  • 竞赛项目 深度学习手势识别算法实现 - opencv python
  • 前端进阶html+css04----盒子模型
  • Go Web--Go Module
  • Spring Boot 统一功能处理(拦截器实现用户登录权限的统一校验、统一异常返回、统一数据格式返回)
  • P4058 [Code+#1] 木材
  • Python学习笔记第五十二天(Pandas 安装)
  • 分布式搜索ElasticSearch-ES(一)
  • react学习笔记——3. jsx语法规则
  • MySQL分表实现上百万上千万记录分布存储的批量查询设计模式
  • 射频入门知识-1
  • 基于注解函数式编程实现组件解耦设计
  • 并查集、树状数组
  • ES6中Null判断运算符(??)正确打开方式-
  • java的内存模型
  • 基于 CentOS 7 构建 LVS-DR 群集 配置nginx负载均衡
  • CSS练习
  • 基于深度学习的3D城市模型增强【Mask R-CNN】
  • LabVIEW对并行机器人结构进行建模仿真
  • 【算法题】1281. 整数的各位积和之差
  • (一)ES6 介绍
  • 窥孔优化(Peephole Optimization)
  • Docker安装ElasticSearch/ES 7.4.0
  • 无涯教程-Perl - readline函数
  • 类与对象(入门)
  • 刷题记录(2023-08-12)