从0开始的React native教程🥹

从0开始的React native教程🥹

1. 前端基本知识（速成版）

简单介绍一下前端三件套：

  • HTML：网页的主干部分，可以理解为骨骼

  • CSS：给页面增加样式，可以理解为皮肤

  • JS：让静态页面动起来，可以理解为肌肉

然后简单介绍一下前端学习的基本路线：

这个是神，前端任何知识点基本都有囊括，有事没事都可以去翻翻：MDN

对于这三座大山，各有各的千秋😣一个个来看

1.1 HTML咋学🥶

感觉很少有人注意到这个问题，都感觉HTML有手就行，甚至于给只鸡撒把米都能写

html

然而，好像确实是这样😵‍💫

这里列个大纲，真的有👋就行：

  • HTML文件结构：<head>、<body>
  • HTML常见标签：<div> <span> <h1-6> <a> <p> <form> <input>等
  • HTML引入标签：<script> <link>
  • HTML5语义化标签：<header> <nav> <main>等

其实还有 音视频标签 和 Canvas这类较难的内容，这里不做展开，只讲最基础的🤠

MDN上的HTML教程

1.2 CSS呢🙀

有了解过前端的同学一定听说过：CSS才是前端最难的一部分

确实是嗷，但是CSS难在不同选择器不同属性的搭配出好看的视觉效果，其实说语法，也是相当简单的，就是要注意：

  • 各选择器的权重组合计算,
  • 伪类伪元素选择器的概念和作用
  • 最新出的css新特性，比如：is,has,of选择器和css嵌套语法。

入门的话我也写过一篇博客：CSS入门，可以参考（这还是招新的时候写的文档🫠）

MDN上CSS的教程

1.3 JS☠️

直接上图；

抽象JS

JS没什么好说的：如果你的代码出现了问题，请先不要怀疑自己，先怀疑是不是js又犯病了🤡

JS的语法也是相当简单，没什么条条框框，随便写，要注意的就是

  • 每个类中有大量的方法，需要灵活使用这些内置方法，比如Array类型含有slice,splice,push,pop,shift,unshift等众多方法。

  • 同时还有个大哥：DOM(Document Object Module) ，简单来说就是浏览器提供了一系列api， 让js可以控制html元素，基本的节点增删改查一定要会，比如document.querySelector，document.appendChild

    在React Native中，DOM操作很受限：不能自由增加、删除节点

  • ES6+新加功能:

    • Promise（这个不是新加功能），async/await：异步操作，网络请求都要用他俩
    • class语法，这对你们来说肯定是小case啦
    • import export语法
    • ...args：解构语法
    • 等等等等

好好看MDN好好学

2. bundler、开发服务器和runtime😎

2.1 bundler

上边的三件套是写一个基本网页的基本要求。在这些要求之外，为了优化性能，还要把code打包压缩一下，这就要提到我们的bundler，现在流行的bundler：

  • webpack：老东西，很慢，但是是很多框架的默认打包工具，比较底层，有很多插件可以用，想了解bundler原理可以看看
  • vi te：现在最流行的打包工具，比webpack快很多，中文文档很详细，毕竟是中国人写的
  • parcel：开箱即用，速度快，不用什么配置
  • bun：最近横空出世的网红打包工具、开发服务器和runtime，只支持类unix，比vite还快一些

2.2 开发服务器

一般的打包工具都会配置一个server.

就比如bun，默认直接bun run dev就可以跑，之后在浏览器直接打开页面就行，一般是localhost:5173

同时使用框架的构建工具的同时，基本会配置好这一项，只用去package.json看相关配置就行，下面讲讲package.json

2.3 runtime

正常js运行在浏览器中，runtime自然就是浏览器中的js引擎，而如果在Node就是node的runtime，包含解释引擎和一些包含文件管理等的模块。

在RN中也是如此，RN提供了Hermes这个runtime，因为没有浏览器的环境，因此很多dom操作也会🚫

3. 依赖管理🥰

首先，要装个Node

如果你用bun，那也行，但接下来我都按node讲

bun的话遵循下面的转换规则：

  • npm i <pcakage> 换成bun add <package>
  • npm i 换成 bun i
  • npx 换成 bunx

刚刚不是说讲讲package.json吗，怎么讲Node了？😱

你先别急，不讲server端的东西，讲讲它的故事

当你去下载Node的时候，会有两个东西被一起下载下来：npm和npx,他俩就像那个舒克和贝塔：

  • npm：管理包的
  • npx：把包拿出来溜溜的

下好之后，执行: npm init初始化，或者npm init -y一切都按默认配置来，这个时候就能看见package.json，初学只需要知道三个信息：

  • dependencies：开发模式和生产模式公用的依赖，一般是核心功能的包
  • devdependencies：开发模式的依赖，一般是测试，代码审查、打包工具之类的
  • scripts：快捷方式

4. 好啦，这些基本知识都有啦，来看看React😊

React的核心就是JSX语法，什么意思呢，就是可以把html和js揉在一起写，像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Login from "@/components/login/login";
import PageWrap from "@/components/pageWrap/pageWrap";
import React from "react";
import {stuLoginConfig} from "@/configs/loginConfig";

const StuLogin: React.FC = () => {
  const {loginProps, topBarProps} = stuLoginConfig
  return (
    <>
      <PageWrap topBarProps={topBarProps}>
        <Login {...loginProps}></Login>
      </PageWrap>
    </>
  )
}

export default StuLogin

JSX的核心是hooks，React提供了一些默认hooks，比如useState，useEffect，useCallback等

可以看看官方文档，这里不多赘述

最后最后，组件化这件事，也不用多说了，通过export和import就可以实现灵活的引入导出组件

然后看看文件结构，就差不多可以毕业了

5. React Native🤪

Native官网

看名字也看得出来，React Native是基于React的一款上层框架，所以之前学的React语法要派的上用场咯👆

你们有sdk的用哪个方法跑都可以，但我个人还是比较推荐expo的方法：手机上下个expo，扫个码就能在手机上跑，或者直接在浏览器上跑

然后,来讲讲RN与React不同的地方:

  • 组件不同，RN中不能使用原始的HTML标签，RN提供的标签有：

    • View：<View> 组件类似于 Web 开发中的 <div> 元素，用于创建一个视图容器，可以包含其他组件，并且可以进行布局和样式控制。
    • Text：<Text> 组件用于显示文本内容，类似于 Web 开发中的 <span> 元素，但是具有更多的文本样式控制属性。
    • Image：<Image> 组件用于显示图片，可以加载本地图片或远程图片，并且支持缩放、裁剪和加载中状态。
    • TextInput：<TextInput> 组件用于接收用户输入的文本，类似于 Web 开发中的 <input> 元素，可以实现文本输入框、密码输入框等功能。
    • ScrollView：<ScrollView> 组件用于创建一个可滚动的视图容器，可以包含大量的子组件，并且支持垂直和水平方向的滚动。
    • FlatList：<FlatList> 组件用于渲染长列表数据，性能更高，支持基于数据源的渲染方式，适用于大型数据集合。
    • TouchableOpacity：<TouchableOpacity> 组件用于实现触摸事件的响应，类似于 Web 开发中的按钮元素，但可以实现点击时的视觉反馈效果。
    • TouchableHighlight：<TouchableHighlight> 组件也用于实现触摸事件的响应，与 <TouchableOpacity> 类似，但是在被按下时会有不同的视觉效果。
    • ActivityIndicator：<ActivityIndicator> 组件用于显示加载指示器，通常用于表示正在加载或处理中的状态。

  • 事件不同，元素属性不同

    比如，在RN中，并不支持onClick属性，要绑定按压事件等话要使用onPress，也不是所有属性都支持onPress，如果想给不支持onPress的组件增加事件监听，就要用到上边的Touchable等标签。

    要想看看每个组件的props，还得去看官方文档：这里拿View举例

  • 更多的api

    RN支持更多系统api，这对你们来说也是老朋友啦，api文档在这里

  • **RN不支持CSS**，因为没有浏览器的runtime，不能解析css用在原生组件上，但是它支持stylesheet这个api，可以用类似于css的方式添加样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import {StyleSheet} from "react-native";

    const styles = StyleSheet.create({
        conversationModalButton: {
            backgroundColor: 'pink',
            borderRadius: 10,
            width: '80%',
            height: '10%',
            wq
    display: "flex",
            justifyContent: "center",
            alignItems: "center",
            fontFamily: "PMingLiU Regular",
            fontSize: 24,
            color: "#fff"
        }
    })

    export default styles

    然后在组件中引入就行：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import {Button} from "react-native";
    import styles from "./button_style";

    const ConversationButton = ({onClick, title}) => {
        return (
            <Button title={title} style={styles.conversationModalButton} onPress={onClick}></Button>
        )
    }

    export default ConversationButton
前端 > react基础
#前端 #react基础
从0开始的React native教程🥹
http://baidu.com/2024/03/16/from_0_to_react-native/
作者
KB
发布于
2024年3月16日
许可协议