React Native 本地存储实现代码示例

以下是一个完整的 React Native 应用代码，演示了如何使用 NativeLocalStorage 模块进行本地数据的存储、检索和清除操作。该应用提供了一个简单的用户界面，允许用户输入文本并管理存储的值。

应用功能概述

• 显示当前存储值：应用启动时从本地存储中读取并显示已保存的数据。
• 输入新值：通过文本输入框，用户可以输入想要存储的新内容。
• 保存数据：点击保存按钮将输入的值存储到本地。
• 删除数据：点击删除按钮移除当前存储的值。
• 清除所有数据：点击清除按钮清空整个本地存储。

代码实现

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  Button,
} from 'react-native';

import NativeLocalStorage from './specs/NativeLocalStorage';

const EMPTY = '<empty>';

function App(): React.JSX.Element {
  const [value, setValue] = React.useState<string | null>(null);
  const [editingValue, setEditingValue] = React.useState<string | null>(null);

  React.useEffect(() => {
    const storedValue = NativeLocalStorage?.getItem('myKey');
    setValue(storedValue ?? '');
  }, []);

  function saveValue() {
    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
    setValue(editingValue);
  }

  function clearAll() {
    NativeLocalStorage?.clear();
    setValue('');
  }

  function deleteValue() {
    NativeLocalStorage?.removeItem(editingValue ?? EMPTY);
    setValue('');
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={styles.text}>
        Current stored value is: {value ?? 'No Value'}
      </Text>
      <TextInput
        placeholder="Enter the text you want to store"
        style={styles.textInput}
        onChangeText={setEditingValue}
      />
      <Button title="Save" onPress={saveValue} />
      <Button title="Delete" onPress={deleteValue} />
      <Button title="Clear" onPress={clearAll} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  text: {
    margin: 10,
    fontSize: 20,
  },
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },
});

export default App;

代码解析

• 状态管理：使用 useState 钩子来管理当前存储值 (value) 和编辑中的值 (editingValue)。
• 副作用处理：在 useEffect 钩子中，组件挂载时从 NativeLocalStorage 读取键为 'myKey' 的存储值，并更新状态。
• 存储操作：saveValue、deleteValue 和 clearAll 函数分别调用 NativeLocalStorage 的 setItem、removeItem 和 clear 方法，并同步更新界面状态。
• 界面组件：应用使用 SafeAreaView 作为容器，包含 Text 显示当前值、TextInput 用于输入，以及三个 Button 触发相应操作。

这个示例展示了在 React Native 中集成本地存储的基本模式，适用于需要持久化少量数据的场景。通过模块化的设计，可以轻松扩展或替换存储实现。