React Native学习笔记

前言

        学习 React Native，建议先掌握一些基础技能，比如 JavaScript 基础语法（变量、函数等）以及 React 的组件、状态管理等概念。这些知识会帮助你更轻松地上手哦～ 🌱

        🔔 温馨小提示：这份笔记会持续更新，期待大家的关注！如果你也希望结识更多志同道合的学习伙伴，可以留意我在公众号上的资源分享 💬。扫码关注公众号让我们一起愉快的学习吧!让我们在技术路上相互陪伴，共同进步吧！💪🌟

        

目录

React Native学习笔记

React Native是什么

React 是什么？

React Native是什么？

React Native 的工作原理是什么？

渲染视图

逻辑执行

创建 React Native 项目

Android实时预览

RN 常用组件

RN 用于编写样式

---

React Native是什么

React 是什么？

        React 是一个用于构建用户界面的 JavaScript 库。

ReactJS 主要特点

1.  组件化：React鼓励开发者以组件化的方式构建界面，其中每个组件负责渲染用户界面的一部分。
2. 虚拟DOM：React引入了虚拟DOM的概念，它在内存中模拟DOM操作，然后一次性将所有更改应用到实际DOM中。这可以提高性能并减少直接对DOM的操作。
3. 声明式编程：React遵循声明式编程范式，开发人员只需描述UI应呈现的样式，React会负责更新DOM以匹配该声明。
4. 单向数据流：React 使用单向数据流（也称为单向反应式数据流），这意味着数据和状态只能沿一个方向流动，这简化了状态管理和调试。
5. JSX：React引入了JSX语法，允许开发人员在JavaScript代码中编写类似HTML的标记，使构建组件更加直观。
6. 钩子：从 React 16.8 版本开始，React 引入了钩子机制，这是一种可以在不编写类的情况下使用状态和其他 React 功能的方法。

------

React Native是什么？

        使用JavaScript和React构建原生移动应用

React Native的主要功能

1. 跨平台开发：使用 JavaScript 构建原生移动应用程序，在不同平台之间共享代码。
2. 高性能：使用原生组件进行渲染，确保平滑、响应迅速的应用程序，通过JavaScript和原生代码之间的双向通信确保高效性能。
3. 实时更新：在开发过程中支持实时更新应用程序界面，无需重新编译，提高开发效率。
4. 丰富的生态系统：拥有庞大的开源社区和丰富的第三方组件库，为开发人员提供了丰富的选择和方便的集成方式。

React Native 的工作原理是什么？

渲染视图

        React Native 会在渲染视图层时使用我们所学的组件和语法，通过 React Native 为我们构建应用的原生元素，类似于我们在学习 React 时通过虚拟 DOM 将代码编译为原生 HTML 元素。

逻辑执行

        当我们在应用程序中编写JS代码时，React Native为我们提供了一个线程执行器来执行相应的JS代码逻辑。

创建 React Native 项目

        你可以在 Expo 的 React Native 网站上查看如何构建 React Native官网 的最新信息。

        有关在 React Native 环境中进行开发的更多信息，请访问官方React Native 文档。

        当我们使用 React Native 时，需要先更新 create-expo-app@latest 依赖项。下面的代码块将演示如何完成此操作。

        用于创建不使用 TypeScript 默认 JS 语法的 React Native 项目。 创建基本的项目结构。

        

npx expo init YourProjectName --template blank

Android实时预览

        首先，我们需要访问AndroidStudio网站下载应用程序，并添加Android虚拟机，在Android虚拟机中进行实时预览。这样我们就可以轻松地进行开发，因为我们不需要像检查手机那样反复操作。

        打开 Android Studio 网站，下载并安装应用程序。安装 Android Studio。点击“下载 Android Studio”按钮。

          打开Android Studio主屏幕，按照步骤安装和安装虚拟机。在页面上点击“更多操作”，然后在新窗口中点击“虚拟设备管理器”。创建 Android 虚拟机

        您可以在 Google Play 商店 App 中下载 Expo，我们将前往 Expo 预览我们的 React Native 应用程序。现在，让我们开始连接我们的应用程序。前提是您需要首先启动我们的 React Native 应用程序，然后在控制台中将获得一个输出消息，用于连接 Android 虚拟机。首先，在终端中运行 `npm start` 启动我们的应用程序。

        你可以使用输入框输入连接地址，或者扫描二维码进行连接。

RN 常用组件

以下是RN中一些常见的组件及其描述：

        更多组件描述信息,参见 React Native 文档中的样式指南

RN 用于编写样式

        相反，RN 提供了一种方法，可以让我们通过 prpos 将写在 jsx 文件中的代码转换为一个对象来进行渲染，而不是直接在 RN 中编写 CSS。需要注意的是，与 CSS 相似并不等于 CSS。以 App.jsx 为例，这是通过命令设置应用程序后提供的代码，来看看 RN 如何为我们编写样式，我们可以借鉴这些样式。

        我们从 React Native 中导入了 StyleSheet，在 App 函数中，我们定义了一个名为 styles 的变量，并使用 StyleSheet.create() 来设置样式规则。在这个例子中，我们有两个样式：container和 myText。语法与 CSS 类似，这是 React Native 提供的功能。

        StyleSheet.create() 允许 React Native 以一种优化的模式来解析这些样式，这种方式更适合移动平台。这种方法与传统的网页 CSS 略有不同，因为 React Native 的样式是以 JavaScript 对象的形式编写的，而不是写在 CSS 文件中。

关键区别：

1. JavaScript 对象语法：React Native 的样式使用 JavaScript 对象语法而不是传统的 CSS 语法。

2. 受限的CSS属性：并非所有CSS属性都得到支持；仅包含与移动布局相关的最相关属性。

3. Flexbox布局：React Native在布局方面高度依赖Flexbox，因为它非常适合移动屏幕的布局。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.myText}>RN render Button</Text>
      <Button title='This is a buttown'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  myText: {
    margin:16,
    borderWidth:2,
    borderColor:"red",
    padding:16
  }
});