React Native如何实现鸿蒙跨平台简易记事本APP开发

React Native作为成熟的跨平台开发框架，现在也支持适配鸿蒙系统，很多开发者想用它快速开发鸿蒙端应用，下面就以简易记事本APP为例，讲解完整的开发流程。

开发环境准备

首先需要配置好对应的开发环境，确保React Native项目可以正常编译到鸿蒙端：

• 安装Node.js 16及以上版本，配置好npm或yarn包管理工具
• 安装React Native CLI，执行命令npm install -g react-native-cli
• 安装鸿蒙开发工具DevEco Studio，配置好鸿蒙SDK
• 安装Java Development Kit 11及以上版本，配置好JAVA_HOME环境变量

项目初始化与鸿蒙适配

先初始化一个React Native项目，再添加鸿蒙平台支持：

# 初始化React Native项目
npx react-native init NoteApp
# 进入项目目录
cd NoteApp
# 添加鸿蒙平台支持（需要提前安装好鸿蒙适配插件）
npx react-native-harmonyos-init

核心功能实现

1. 记事本数据模型设计

记事本每条记录需要包含id、标题、内容、创建时间、更新时间几个字段，我们可以用如下接口定义：

// 定义记事本条目类型
interface NoteItem {
  id: string; // 唯一标识
  title: string; // 笔记标题
  content: string; // 笔记内容
  createTime: number; // 创建时间戳
  updateTime: number; // 更新时间戳
}

2. 本地存储功能实现

简易记事本不需要后端服务，用本地存储保存数据即可，这里使用@react-native-async-storage/async-storage库：

import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储所有笔记的key
const NOTES_STORAGE_KEY = 'NOTE_APP_NOTES';

// 获取所有笔记
export const getAllNotes = async () => {
  try {
    const notesStr = await AsyncStorage.getItem(NOTES_STORAGE_KEY);
    return notesStr ? JSON.parse(notesStr) : [];
  } catch (e) {
    console.error('获取笔记失败', e);
    return [];
  }
};

// 保存所有笔记
export const saveAllNotes = async (notes) => {
  try {
    await AsyncStorage.setItem(NOTES_STORAGE_KEY, JSON.stringify(notes));
  } catch (e) {
    console.error('保存笔记失败', e);
  }
};

// 新增笔记
export const addNote = async (title, content) => {
  const allNotes = await getAllNotes();
  const newNote = {
    id: Date.now().toString(),
    title,
    content,
    createTime: Date.now(),
    updateTime: Date.now()
  };
  allNotes.unshift(newNote);
  await saveAllNotes(allNotes);
  return newNote;
};

// 删除笔记
export const deleteNote = async (id) => {
  let allNotes = await getAllNotes();
  allNotes = allNotes.filter(item => item.id !== id);
  await saveAllNotes(allNotes);
};

// 更新笔记
export const updateNote = async (id, title, content) => {
  let allNotes = await getAllNotes();
  const index = allNotes.findIndex(item => item.id === id);
  if (index !== -1) {
    allNotes[index].title = title;
    allNotes[index].content = content;
    allNotes[index].updateTime = Date.now();
    await saveAllNotes(allNotes);
  }
};

3. 页面布局与交互实现

记事本主要有两个页面：列表页和编辑页，下面是实现列表页的核心代码：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { getAllNotes, deleteNote } from './storage';

const NoteListPage = ({ navigation }) => {
  const [notes, setNotes] = useState([]);

  // 每次页面聚焦时刷新笔记列表
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      loadNotes();
    });
    return unsubscribe;
  }, [navigation]);

  const loadNotes = async () => {
    const allNotes = await getAllNotes();
    setNotes(allNotes);
  };

  const handleDelete = async (id) => {
    await deleteNote(id);
    loadNotes();
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.noteItem}
      onPress={() => navigation.navigate('EditNote', { noteId: item.id })}
    >
      <View style={styles.noteInfo}>
        <Text style={styles.noteTitle} numberOfLines={1}>{item.title || '无标题'}</Text>
        <Text style={styles.noteContent} numberOfLines={2}>{item.content || '暂无内容'}</Text>
        <Text style={styles.noteTime}>
          更新时间：{new Date(item.updateTime).toLocaleString()}
        </Text>
      </View>
      <TouchableOpacity
        style={styles.deleteBtn}
        onPress={() => handleDelete(item.id)}
      >
        <Text style={styles.deleteText}>删除</Text>
      </TouchableOpacity>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={notes}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        ListEmptyComponent={
          <Text style={styles.emptyText}>暂无笔记，点击右上角添加</Text>
        }
      />
      <TouchableOpacity
        style={styles.addBtn}
        onPress={() => navigation.navigate('EditNote', { noteId: null })}
      >
        <Text style={styles.addText}>+</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  listContent: {
    padding: 16
  },
  noteItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    marginBottom: 12,
    elevation: 2
  },
  noteInfo: {
    flex: 1
  },
  noteTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4
  },
  noteContent: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4
  },
  noteTime: {
    fontSize: 12,
    color: '#999'
  },
  deleteBtn: {
    padding: 8,
    backgroundColor: '#ff4d4f',
    borderRadius: 4,
    marginLeft: 12
  },
  deleteText: {
    color: '#fff',
    fontSize: 14
  },
  addBtn: {
    position: 'absolute',
    right: 24,
    bottom: 24,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#1890ff',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4
  },
  addText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold'
  },
  emptyText: {
    textAlign: 'center',
    color: '#999',
    marginTop: 40,
    fontSize: 14
  }
});

export default NoteListPage;

编译运行到鸿蒙设备

完成代码开发后，执行以下命令编译运行到鸿蒙设备：

# 启动Metro服务
npx react-native start
# 新开终端，运行到鸿蒙设备
npx react-native run-harmonyos

确保鸿蒙设备已经开启开发者模式并连接到电脑，等待编译完成后就可以在设备上看到运行的简易记事本APP，支持新增、编辑、删除笔记，数据会保存在本地不会丢失。

React_Native鸿蒙跨平台开发记事本APP修改时间：2026-05-31 06:04:28