【跨端技术】React Native学习记录一

原创已于 2025-12-28 17:25:02 修改 · 261 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react native #学习 #react.js #javascript

于 2025-12-27 23:19:01 首次发布

ReactNative 专栏收录该内容

1 篇文章

订阅专栏

记录RN的入坑记录，零散笔记

一. 官方文档学习

官方文档

1. 环境搭建

1.1 开发一个纯RN的项目

资料1
资料2

1.2 集成到现有原生应用(todo)

1.3 集成到 Android Fragment (todo）

2. 函数式组件和class组件

函数式组件和 Class 组件是 React 中定义组件的两种主要方式，它们在语法、功能和使用场景上有一些区别。

函数式组件（Functional Component）
函数式组件是一个简单的 JavaScript 函数，接收一个 props 对象作为参数，并返回一个 React 元素。它是定义组件的最简单方式。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class 组件（Class Component）
Class 组件是通过继承 React.Component 类来定义的，它需要实现 render() 方法来返回 React 元素。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

在这里插入图片描述

3. React 基础

添加链接描述

3.1 JSX语法定义一个组件

import React from 'react';
import { Text } from 'react-native';

const Cat = () => {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Cat;

在别处通过来任意引用这个组件了

3.2 Props 属性

import React from 'react';
import { Text, View } from 'react-native';

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

export default Cafe;

3.3 State 状态

如果把 props 理解为定制组件渲染的参数，那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。状态使组件拥有了记忆！

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
}

export default Cafe;

3.4 处理文本输入

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

注意语法点：
(word) => word && ‘🍕’ 表示如果 word 存在（非空），就返回

3.5 使用滚动视图

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
};

export default App = () => (
  <ScrollView>
    <Text style={{ fontSize: 96 }}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 96 }}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{ fontSize: 80 }}>React Native</Text>
  </ScrollView>
);

pagingEnabled属性来允许使用滑动手势对视图进行分页，在 Android 上也可以利用ViewPager组件水平滑动视图
在 iOS 上包含单个子元素的 ScrollViews 可以允许用户对内容进行缩放. 通过设置maximumZoomScale和minimumZoomScale两者的属性, 您的用户能够利用捏合以及扩大手势来放大或缩小。

3.6 使用长列表:FlatList和SectionList

FlatList
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染

// 导入 React 库，用于创建组件
import React from 'react';

// 从 react-native 导入核心组件：FlatList（列表）、StyleSheet（样式）、Text（文本）、View（容器）
import { FlatList, StyleSheet, Text, View } from 'react-native';

// 使用 StyleSheet.create 创建可复用的样式对象
const styles = StyleSheet.create({
  // 容器样式，flex: 1 表示占满整个屏幕空间
  container: {
    flex: 1,
    // 设置顶部内边距为 22 像素，常用于避开状态栏
    paddingTop: 22
  },
  // 列表项样式，用于每个列表项的文本样式
  item: {
    padding: 10,         // 内边距 10 像素
    fontSize: 18,        // 字体大小为 18
    height: 44,          // 每个列表项的高度为 44 像素
  },
});

// 定义一个函数组件 FlatListBasics
const FlatListBasics = () => {
  return (
    // 使用 View 作为根容器，应用 container 样式
    <View style={styles.container}>
      {/* 使用 FlatList 组件展示一个可滚动的列表 */}
      <FlatList
        // 设置列表数据源，每个对象都有一个 key 属性
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        // 每个列表项渲染的函数，item 表示当前项数据
        renderItem={({item}) => (
          // 渲染文本，应用 item 样式，显示 item.key
          <Text style={styles.item}>{item.key}</Text>
        )}
      />
    </View>
  );
}

// 导出 FlatListBasics 组件，供其他组件引入使用
export default FlatListBasics;

SectionList
分类的，常用于按字母分组的通讯录

import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

export default SectionListBasics;

在这里插入图片描述

3.7 特定平台代码

React Native 提供了两种方法来区分平台：

使用Platform模块

Platform.OS

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.select

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

检测android平台版本

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

检测ios平台版本
注意ios返回的字符串，与android不一样，需要单独处理

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

使用特定平台后缀
当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台后缀。React Native 会检测某个文件是否具有.ios.或是.android.的后缀，然后根据当前运行的平台自动加载正确对应的文件。
如果你还希望在 web 端复用 React Native 的代码，那么还可以使用.native.js的后缀

BigButton.ios.js
BigButton.android.js

import BigButton from './BigButton';

4. 开发流程

4.1 快速刷新

快速刷新是 React Native 一个特性，在修改组件的时候快速刷新会给你一个即时的反馈。快速刷新默认是开启的，可以通过调整 React Native 开发者菜单里面的 “Enable Fast Refresh” 来开启或关闭。在快速刷新开启的时候，大多数的修改能在一到两秒之内呈现。

在开发者菜单中：
摇晃设备或在模拟器中按下 Cmd+M（iOS）或 Ctrl+M（Android）。
点击 “Enable Fast Refresh” 来开启或关闭。

4.2 Metro

Metro 是 React Native 的默认 JavaScript 打包工具（JavaScript Bundler），它的核心作用是将你写的 React Native 代码（包括 .js、.jsx、.json、图片等资源）打包成一个或多个可以在移动设备上运行的 JavaScript bundle 文件。
在这里插入图片描述

工作流程
你运行 npx react-native start 或 npm start。
Metro 启动本地开发服务器，默认监听 localhost:8081。
React Native App 通过 fetch 从 Metro 获取 JS bundle。
你修改代码保存后，Metro 检测到变化，增量打包并通知 App 更新。
App 使用 Fast Refresh 或 Hot Reloading 来更新界面。
Metro 的核心配置文件：metro.config.js

4.3 使用第三方库

常见包管理器
第三方库链接
添加链接描述

4.4 TypeScript

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，意味着它在 JavaScript 的基础上添加了静态类型系统和其他高级特性。TypeScript 最终会被编译成普通的 JavaScript，以便在浏览器或任何支持 JavaScript 的环境中运行。
React Native 支持 TypeScript 吗？从 v0.60 开始。