iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
1
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 25

React Native App 實戰 (八) 記錄設定檔

  • 分享至 

  • xImage
  •  

今天要來簡單教一個之前基礎教學漏掉的 AsyncStorage 簡單的來說就是瀏覽器當中的 localStorage 他能把 key 記錄下來,下次讀取出來使用,這樣子我們的 App 就不會因為重新開啟,而每次都要重新登入,或是 UI 設定等等的小東西可以直接記錄在使用者的手機當中。

AsyncStorage

基本的兩種用法設定跟拿資料,可以使用

  • getItem(key, (err, result) => {})
  • setItem(key, value, (err, result) => {}))

除了使用 callBack 外也能用 await async 的語法。
昨天我們有把 Intro 頁面接上去,但是總不能每次開啟 App 都請使用者看教學吧,這樣我想沒兩次大概就被刪除了,所以今天我們要借助這個 AsyncStorage 來記錄使用者有沒有看過教學,如果有就略過直接進入登入的畫面,實作完成長這樣。

修改的程式碼在這

我們可以在 Router.js 看到 componentWillMount

  componentWillMount() {
    this.getStorage().done();
    // this.setState({ firstPage: 'login' });
  }

  getStorage = async () => {
    try {
      const value = await AsyncStorage.getItem('@Route:initialPage');
      if (value !== null) {
        console.log(value);
        this.setState({ firstPage: value });
      }
    } catch (error) {
      console.log(error);
    }
  }

這是 React 的生命週期,意思是每次 Component 準備完成要 render 前都會呼叫這個 function,這時候我們能做最後的更動,我們就在這邊用 await AsyncStorage.getItem 讀出 Storage 裡面的資料在 setState 來更改畫面的顯示。

Intro.js 這邊我們可以看到 onSkipBtnHandledoneBtnHandle

  setStorage = async () => {
    try {
      await AsyncStorage.setItem('@Route:initialPage', 'login');
    } catch (error) {
      console.log(error);
    }
  }

  onSkipBtnHandle = () => {
    this.setStorage().done();
    Actions.home();
  }

  doneBtnHandle = () => {
    this.setStorage().done();
    Actions.home();
  }

如果按到了他就會把 Storage 裡面的資料改為 login,這樣下次開啟 App 的時候就會是進入登入頁面了。


有問題歡迎來 React Native Taiwan 問喔
創科資訊


上一篇
React Native App 實戰 (七) 第一次開啟 APP 介紹頁面
下一篇
React Native App 實戰 (九) 幫 App 換上 Icon
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言