react-native-mmkv

import React, { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { MMKV, useMMKVString, useMMKVNumber, useMMKVBoolean } from '@amazon-devices/react-native-mmkv';

const storage = new MMKV();

export const App = () => {
  const [hookUsername, setHookUsername] = useMMKVString('hookUsername');
  const [hookAge, setHookAge] = useMMKVNumber('hookAge');
  const [hookIsLoggedIn, setHookIsLoggedIn] = useMMKVBoolean('hookIsLoggedIn');

  const [status, setStatus] = useState<string>("");

  const handleSetData = () => {
    storage.set('username', 'JohnDoe');
    storage.set('isLoggedIn', true);
    storage.set('age', 30);
    setStatus('已存储username、isLoggedIn和age');
  };

  const handleGetStringData = () => {
    const username = storage.getString('username');
    setStatus(`从数据中检索到的用户名：${username || '无'}`);
  };

  const handleGetNumberData = () => {
    const age = storage.getNumber('age');
    setStatus(`从数据中检索到的年龄：${age}`);
  };

  const handleGetBooleanData = () => {
    const isLoggedIn = storage.getBoolean('isLoggedIn');
    setStatus(`从数据中检索到的登录状态：${isLoggedIn}`);
  };

  const handleCheckKey = () => {
    const hasUsernameKey = storage.contains('username');
    setStatus(`已存在用户名键：${hasUsernameKey}`);
  };

  const handleListKeys = () => {
    const allKeys = storage.getAllKeys();
    setStatus(`键：${allKeys.join(', ')}`);
  };

  const handleDeleteKey = () => {
    storage.delete('username');
    setStatus('已删除"username"键。');
  };

  const handleClearAll = () => {
    storage.clearAll();
    setStatus('所有数据已从存储中清除。');
  };

  const handleRecryptStorage = () => {
    storage.recrypt('newEncryptionKey');
    setStatus('存储的值已使用新键重新加密。');
  };

  const handleDisplaySize = () => {
    setStatus(`存储大小：${storage.size} 字节`);
  };

  const handleHookSetData = () => {
    setHookUsername('JaneDoe');
    setHookIsLoggedIn(false);
    setHookAge(25);
    setStatus('已存储username、isLoggedIn和age');
  };

  const handleUseMMKVStringData = () => {
    setStatus(`使用挂钩获取的用户名：${hookUsername || '无'}`);
  };

  const handleUseMMKVNumberData = () => {
    setStatus(`使用挂钩获取的年龄：${hookAge}`);
  };

  const handleUseMMKVBooleanData = () => {
    setStatus(`使用挂钩获取的登录状态：${hookIsLoggedIn}`);
  };

  return (
    <View style={styles.container} testID="mmkv-app-container">
      <Text style={styles.title}>React Native MMKV示例</Text>
      <Text style={styles.title} testID="mmkv-status">状态: {status}</Text>
      <Button title="设置数据" onPress={handleSetData} testID="mmkv-app-set-button" />
      <Button title="获取字符串" onPress={handleGetStringData} testID="mmkv-app-get-string-button" />
      <Button title="获取数值" onPress={handleGetNumberData} testID="mmkv-app-get-number-button" />
      <Button title="获取布尔值" onPress={handleGetBooleanData} testID="mmkv-app-get-boolean-button"/>
      <Button title="检查键是否存在" onPress={handleCheckKey} testID="mmkv-app-contains-button"/>
      <Button title="列出所有键" onPress={handleListKeys} testID="mmkv-app-get-all-keys-button"/>
      <Button title="删除'Username'键" onPress={handleDeleteKey} testID="mmkv-app-delete-key-button"/>
      <Button title="清除所有数据" onPress={handleClearAll} testID="mmkv-app-clear-all-button"/>
      <Button title="重新加密存储" onPress={handleRecryptStorage} testID="mmkv-app-recrypt-button"/>
      <Button title="显示存储空间大小" onPress={handleDisplaySize} testID="mmkv-app-size-button"/>
      <Button title="使用挂钩设置数据" onPress={handleHookSetData} testID="mmkv-app-hook-set-button"/>
      <Button title="使用挂钩获取字符串数据" onPress={handleUseMMKVStringData} testID="mmkv-app-hook-get-string-button"/>
      <Button title="使用挂钩获取数字数据" onPress={handleUseMMKVNumberData} testID="mmkv-app-hook-get-number-button"/>
      <Button title="使用挂钩获取布尔数据" onPress={handleUseMMKVBooleanData} testID="mmkv-app-hook-get-boolean-button"/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center',
  },
  button: {
    marginVertical: 10,
  },
});