HuberyYang的博客 | HuberyYang Blog

React Native function组件生命周期

function组件生命周期

React Native 的function组件没有像class组件那样的生命周期，但是在React 16.8版本以及之后，引入了Hooks，包含一些可以在function组件中使用的生命周期函数。具体来说，Hooks提供的三个常见的生命周期函数是: useEffect：在组件首次渲染和组件状态更新时都会执行，类似于componentDidMount和componentDidUp...

Posted by HuberyYang on April 5, 2023

React Native class组件生命周期

class组件生命周期

React Native框架定义了一系列回调函数，用于在 class 组件的不同生命周期阶段执行特定的操作 constructor() constructor 构造方法常用来初始化state，是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。当存在constructo...

Posted by HuberyYang on March 26, 2023

React Native JSX语法特点

JSX语法特点

React Native 的开发使用的是JavaScript, 但语法与JavaScript 又有一些不同，是基于JavaScript 的一种语法扩展，名为 JSX。下面来看一下 JSX 的相关特点：类似于html标签的格式 JSX 需要有一个根节点 <> xxx </>，一般使用 <View> </View> 作为根节点单标...

Posted by HuberyYang on March 15, 2023

React Native TouchableOpacity组件常用属性

TouchableOpacity组件常用属性

TouchableOpacity是React Native中的一个可点击的组件，可以在用户点击时触发相应的事件，应该是平常使用最多的类APPButton组件。使用TouchableOpacity之前需要先了解其常用属性： style style 组件的样式，可以设置宽度、高度、布局等样式属性 <TouchableOpacity style=> <Text sty...

Posted by HuberyYang on December 25, 2022

React Native TextInput组件常用属性

TextInput组件常用属性

TextInput组件是一种常用的React Native文本输入框组件。它允许用户在应用程序中输入文本，将其作为表单输入的一部分进行提交或将其保存到本地存储中。下面将罗列一下TextInput组件常用的属性： style style 属性可以设置 TextInput 的样式，边距、字体、圆角等等都可以配置 <TextInput style={styles.input} />...

Posted by HuberyYang on November 16, 2022

React Native Image组件常用属性

Image组件常用属性

Image 组件是 React Native 中用于显示图像和其他媒体的组件。该组件可用于从浏览器或本地文件系统加载图像，并支持多种格式的媒体文件。下面介绍Image中一些常用属性： source source 属性指定要显示的图像的来源。它可以是一个本地文件路径，一个远程 URL 或一个 require() 函数的返回值，该函数将返回一个图片资源。下面是一个加载本地图片的示例： im...

Posted by HuberyYang on October 21, 2022

React Native Text组件常用属性

Text组件常用属性

Text是React Native 中被广泛使用的组件，下面介绍Text中一些常用属性： style 属性描述：指定 Text 组件的样式示例代码： <Text style=>这是一个红色字体，字体大小为20的 Text 组件</Text> numberOfLines 属性描述：指定文本显示的最大行数示例代码： <Text numberOfLin...

Posted by HuberyYang on September 3, 2022

ES6与ES5不同点

ES6对比ES5

ES6是ECMAScript6的缩写，也称为ECMAScript2015，它是JavaScript语言的新一代标准，相对于ES5，它有以下几个方面的不同点：块级作用域 ES5只有全局作用域和函数作用域，没有块级作用域。而在ES6中，引入了let和const关键字用来声明块级作用域。示例代码： ES5： var a = 1; if (true) { var a = 2; } c...

Posted by HuberyYang on August 16, 2022

React Native 目录结构

目录结构

使用tree 查看目录结构 tree -a -L 1，结构如下： . ├── .bundle ├── .eslintrc.js # eslint的配置文件 ├── .gitignore # git 忽略文件 ├── .idea # idea 配置文件 ├── .node-version # node 版本 ├── .pret...

Posted by HuberyYang on May 26, 2022

Watchman crawl failed. Retrying once with node crawler

React native error

react native 运行iOS时出现错误：Error: jest-haste-map: Watchman crawl failed. Retrying once with node crawler. 进过查证有以下几种可能: 由 brew 安装的 watchman 版本过高，所以降低版本即可先卸载 brew uninstall watchman 再安装 brew inst...

Posted by HuberyYang on May 20, 2022

HuberyYang Blog