React Native 奇幻之旅(19)-資料的存儲和快取

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

<em>// 非物件型別的資料</em>
const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('my-key', value)
  } catch (e) {
    <em>// saving error</em>
  }
}

<em>// 物件型別的資料</em>
const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('my-key', jsonValue)
  } catch (e) {
    <em>// saving error</em>
  }
}

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

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('my-key');
    return jsonValue != null ? JSON.parse(jsonValue) : null
  } catch (e) {
    <em>// error reading value</em>
  }
}

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

const removeValue = async () => {
  try {
    await AsyncStorage.removeItem('my-key')
  } catch(e) {
    <em>// remove error</em>
  }
}

const db = SQLite.openDatabase(
  {
    name: 'myDatabase.db',
    location: 'default',
  },
  () => {
    <em>// 資料庫連接成功</em>
  },
  error => {
    console.error('資料庫連接時出錯', error)
  }
)

<em>// 插入數據</em>
db.transaction(tx => {
  tx.executeSql('INSERT INTO MyTable (name) VALUES (?)', ['John'], (_, result) => {
    console.log('插入成功，行ID：', result.insertId)
  })
})

<em>// 查詢數據</em>
db.transaction(tx => {
  tx.executeSql('SELECT * FROM MyTable', [], (_, { rows }) => {
    const data = rows.raw()
    console.log('查詢結果：', data)
  })
})

import * as Keychain from 'react-native-keychain'

const getCredentials = async () => {
    try {
        const credentials = await Keychain.getGenericPassword()
        if (credentials) {
            console.log(credentials)
        } else {
            console.log("No credentials stored")
        }
    } catch (error) {
        console.log("Keychain couldn't be accessed!", error)
    }
}

import * as Keychain from 'react-native-keychain'

const logout = async () => {
    const logout = await Keychain.resetGenericPassword()

    if (!!logout) {
        <em>// ...</em>
    }
}

import * as SecureStore from 'expo-secure-store'

const getValue = async (key) => {
  let result = await SecureStore.getItemAsync(key)
  if (result) {
    alert("🔐 Here's your value 🔐 \n" + result)
  } else {
    alert('No values stored under that key.')
  }
}

import Realm from 'realm'

<em>// 定義 Schema 用來描述資料結構</em>
const UserSchema = {
  name: 'User',
  properties: {
    id: 'int',
    username: 'string',
    email: 'string',
    createdAt: 'date'
  }
}

<em>// 新增 user </em>
const createUsers = (users) => {
  realm.write(() => {
    const createdAt = new Date()
    const data = users.map(user => ({
      id: user.id,
      username: user.username,
      email: user.email,
      createdAt
    }))
    realm.create('User', data)
  })
}

<em>// 獲取所有 user</em>
const getUsers = () => {
  return realm.objects('User')
}

<em>// 更新 user 資料</em>
const updateUser = (userId, newData) => {
  realm.write(() => {
    const user = realm.objectForPrimaryKey('User', userId)
    if (user) {
      user.username = newData.username
      user.email = newData.email
    }
  })
}

<em>// 刪除 user</em>
const deleteUser = (userId) => {
  realm.write(() => {
    const user = realm.objectForPrimaryKey('User', userId)
    if (user) {
      realm.delete(user)
    }
  })
}

const users = [
    {
      id: 1,
      username: 'tom',
      email: 'tom@gmail.com'
    },
    {
      id: 2,
      username: 'allen',
      email: 'allen@gmail.com'
    }
]

createUser(users)

const allUsers = getUsers()
console.log('所有用戶：', allUsers)

updateUser(1, { username: 'alex', email: 'alex@gmail.com' })
console.log('更新後的用戶：', getUsers())

deleteUser(2)
console.log('刪除後的用戶：', getUsers())

const users = realm.objects('User')

users.addListener((collection, changes) => {
  if (changes.insertions.length > 0) {
    console.log('新增用戶：', changes.insertions)
  }
  if (changes.modifications.length > 0) {
    console.log('更新用戶：', changes.modifications)
  }
  if (changes.deletions.length > 0) {
    console.log('刪除用戶：', changes.deletions)
  }
})

import React, { useEffect, useState } from 'react'
import { Image, View, Platform } from 'react-native'
import RNFetchBlob from 'react-native-blob-util'

export const ImageCacheExample = () => {
  const [path, setPath] = useState(null)

  useEffect(() => {
    const imageUrl = 'https://unsplash.it/350/150'

    RNFetchBlob.config({
      fileCache: true,
      appendExt: 'png'
    })
      .fetch('GET', imageUrl)
      .then((res) => {
        setPath(res.path())
      })
  }, [])

  return (
    <View>
      {path && (
        <Image
          source={{ uri: Platform.OS === 'android' ? 'file://' + path : path }}
          style={{ width: 350, height: 150 }}
        />
      )}
    </View>
  );
}

import FastImage from 'react-native-fast-image'

<FastImage
  source={{
    uri: data.assets.image,
    cache: FastImage.cacheControl.immutable
  }}
  style={styles.image}
  resizeMode="contain"
/>

RNFetchBlob.config({
  fileCache: true,
  appendExt: 'png'
})
  .fetch('GET', 'https://www.example.com/file/file.zip',{
    Authorization : 'Bearer access-token...',
  })
  .then((res) => {
    setPath(res.path())
  })

const [data, setData] = useState([])

useEffect(() => {
  loadData()
}, [])

const loadData = async () => {
  const path = await AsyncStorage.getItem('path')

  if (path) {
    RNFetchBlob.fs.readFile(path, 'utf8')
      .then((res) => {
        const data = JSON.parse(res)
        setData(data)
      })
  } else {
    RNFetchBlob
      .config({ fileCache: true, appendExt: 'json' })
      .fetch('GET', 'https://www.example.com/api/data.json')
      .then(async (res) => {
        const data = await res.json()
        setData(data)
        await AsyncStorage.setItem('path', res.path())
      })
  }
}