开启RN之旅——前端基础

前言

一、了解ES6的常用方法

1.1、什么事ES5、ES6？

1.2、变量声明

前言

由于咱们之前是做移动端开发的，所以在正式开始学习RN之前，咱们花点时间简单了解一下前端的一些基础知识，方便后续的学习。

一、了解ES6的常用方法

1.1、什么事ES5、ES6？

ES5全称ECMAScript5，是ECMAScripts的第五次修订，又称ECMAScript2009, 于 2009 年完成标准化。

ES6全称 ECMAScript6.0，是ECMAScripts的第六次修订，又称 ES2015，于2015年06 月发版，是 JavaScript 的下一个版本标准。

1.2、变量声明

var：存在变量提升问题，允许先使用后声明，未定义时返回undefined。破坏作用域规则，导致代码的可读性降低
let：ES6引入，必须先声明后使用，无变量提升
const：ES6引入，声明后不可重新赋值，必须初始化。与let的区别是，let允许重新赋值，const为常量

1.3、对象属性简写

ES6对象属性简写规则：当属性名与变量名相同时，可省略冒号及值（如const user = {name}等价于{name: name}，如下图所示：

1.4、Object.assign

Object.assign的作用：合并多个对象（如Object.assign({}, o1, o2)将o1和o2的属性合并到新对象）

如下图所示：

1.5、解构赋值

解构赋值功能：从对象或数组中提取值并赋值给变量

基本语法：通过const {name, age} = user直接从对象user中提取属性

如下图所示：

1.6、展开运算符

{ ...obj }语法可展开对象属性，通过它与解构合并可以实现类似Object.assign的功能，比如：const user = {...userName, ...age}，如下图所示：

1.7、模板字符串

使用反引号包裹，支持嵌入变量（如name=${user.name}）
优势：简化字符串拼接，提升可读性

举个栗子🌰吧：

1.8、Promise

Promise的核心机制：

resolve：处理异步成功结果（通过.then()接收）
reject：处理异步失败结果（通过.catch()捕获）

这里咱们还是举个例子吧：定义一个check()函数，当check(true)时触发resolve返回"success"，当check(false)时触发reject返回"error"，如下图所示：

更多详情可以参考：JavaScript Promise

1.9、import和export

import和export是ES6提供的模块化语法，用于实现代码模块间的引用与共享。

在demo工程的index.js文件中，通过import App from './App'语句导入App模块。./表示当前目录，因此该语句表示从同级目录下的App文件导入内容。

App文件中使用export关键字导出了一个App组件，该组件可在index.js中通过import引入。

虽然这里使用的是TypeScript，咱们先不管，先了解一些JS基础，后面再了解TS就小菜一碟了。

ES6是JavaScript语言的重要里程碑，其规范完善了语言特性，显著提升了开发效率，因此掌握ES6语法对前端开发来说是至关重要的。

二、了解babel

2.1、什么是babel

Babel是JavaScript编译器，编译过程包含解析、转换和打印输出三个核心环节。

①、babel是一个工具链

Babel作为工具链，主要功能是将ES6+代码及React JSX语法转换为向后兼容的JavaScript语法，解决新旧版本兼容性问题。

②、为什么需要babel？

浏览器兼容性问题：JavaScript新特性发布后，浏览器支持存在滞后性
开发效率需求：通过Babel将新语法实时转换为旧语法，确保代码在未支持新特性的浏览器中正常运行
本质功能：Babel是语法翻译器，实现高版本语法向低版本的降级转换

2.2、初步了解babel配置

打开Demo工程的bable.config.js文件，如下所示：

比如这里用到了一个reactnative的预设，预设就是把很多的配置打成了包，只需要引用这个包，就可以引用这个包里面所包含的所有的配置。

Babel配置通过预设（presets）和插件（plugins）实现功能扩展，预设包含预定义配置集合，插件用于补充自定义需求。

babel配置实例：

|---------|----------------------------|-------------|
| 配置项 | 功能说明 | 应用场景 |
| presets | 预定义配置包（如@babel/preset-env） | 快速启用标准语法转换 |
| plugins | 扩展自定义功能（如模块路径解析） | 处理特定语法或优化场景 |
| env配置 | 按环境差异化配置（如生产环境关闭console输出） | 环境适配与性能优化 |

三、CSS-flex布局基础

更多详情可以参考：弹性盒子

3.1、css-flex布局介绍

direction属性：定义布局方向为横向（row）或纵向（column）。横向布局时子元素从左到右排列，纵向布局时从上到下排列。
主轴与交叉轴对齐：横向布局中水平方向为主轴，垂直方向为交叉轴；纵向布局中垂直方向为主轴，水平方向为交叉轴。对齐方式通过justify-content（主轴）和align-items（交叉轴）控制。
flex-grow与flex-shrink属性：
- flex-grow：当父元素宽度大于子元素总和时，按比例分配剩余空间。
- flex-shrink：当子元素总和超过父元素宽度时，按比例压缩子元素。

3.2、css-flex布局示例

①、flex-direction属性值

row：横向排列（默认）。
column：纵向排列。
row-reverse/column-reverse：反向排列。

下面通过代码来实际体验一下，设置flex-direction: row时，子元素水平排列；改为column后变为垂直排列，通过margin调整间距可直观观察布局变化。咱们打开Demo工程的App.tsx文件，在终端通过npm run android启动项目，然后修改代码：

TypeScript 复制代码

import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.container}>
        <View style={styles.child} />
        <View style={styles.child} />
        <View style={styles.child} />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    marginTop: 50,
  },
  child: {
    width: 60,
    height: 60,
    backgroundColor: 'red',
    marginRight: 10,
  },
});

然后保存回到模拟器中查看效果：

如果把上面代码中的flexDirection的值修改为column，则效果如下：

②、主轴和交叉轴对齐

横向布局（row）中，水平方向为主轴，垂直方向为交叉轴。
纵向布局（column）中，垂直方向为主轴，水平方向为交叉轴。
justify-content: center：主轴居中。
align-items: center：交叉轴居中。

举个栗子：不同尺寸子元素通过对齐属性实现垂直或水平居中。

TypeScript 复制代码

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.container}>
        <View style={styles.child1} />
        <View style={styles.child2} />
        <View style={styles.child3} />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 50,
  },
  child1: {
    width: 30,
    height: 30,
    backgroundColor: 'red',
    marginRight: 10,
  },
  child2: {
    width: 60,
    height: 60,
    backgroundColor: 'red',
    marginRight: 10,
  },
  child3: {
    width: 90,
    height: 90,
    backgroundColor: 'red',
    marginRight: 10,
  },
});

这里咱们是让整体的宽度填充整个屏幕，方向是row就是横向，那么主轴就是横向，交叉轴就是纵向，这里让子元素在水平和垂直方向上都居中，效果如下：

③、元素的放大和缩小

flex-grow：父元素剩余空间按子元素的flex-grow值分配（未定义则为0）。
示例：三子元素均设为1时等分剩余空间；若仅一个元素为1，则独占剩余空间。

在上面第②个示例代码的基础上，对child2元素的样式做如下修改，添加一个flex-grow属性：

TypeScript 复制代码

child2: {
    width: 60,
    height: 60,
    backgroundColor: 'red',
    marginRight: 10,
    flexGrow: 1,
  },

效果变成了这样：

对于flexShrink它的作用则是相反的，如果子元素超出了父布局的宽度，就根据flexShrink的值进行压缩，同样的举个例子吧：

咱们先修改上面三个子元素的宽度让它超出父布局的宽度，代码如下：

TypeScript 复制代码

child1: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    marginRight: 10,
  },
  child2: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    marginRight: 10,
  },
  child3: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
    marginRight: 10,
  },

然后给child2添加flexShrink属性：

TypeScript 复制代码

child2: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    marginRight: 10,
    flexShrink: 1,
  },

那么效果则变成了这样的：

即是：1和3不变，2减肥。

四、npm

4.1、npm是什么

npm的全称为Node Package Manager，是Node.js的包管理工具。其功能类似于Android开发中通过Gradle获取远程库的方式，区别在于Gradle的库存储在Maven或者Jetpack等平台，而npm的库统一存储在npm官方平台。npm的官方域名为npmjs.com，所有第三方库均托管于此。