ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

React Native SDKを使ってニュースアプリを作る(お気に入り表示)

f:id:mbaasdevrel:20180306160753p:plain

React Native SDKを使ってサンプルアプリを開発してみます。今回はexpoを使って、iPhoneシミュレータで開発を進めていきます。

前回はお気に入り登録&削除機能を作成しましたので、今回はお気に入り一覧を取得、表示します。

ホーム画面に表示切り替え用のセグメントコントロールを追加する

ニュース一覧とお気に入り一覧を切り替えるセグメントコントロールを追加します。これはリスト表示の上に追加します。また、その際の選択したデータをselectedとして、Listコンポーネントに送信します。

render() {
  const {navigation, ncmb} = this.props;
  return (
    <View style={styles.container}>
      <SegmentedControlTab
        values={["All", "Favorited"]}
        selectedIndex={this.state.selected}
        onTabPress={this.handleIndexChange}
      />
      <List navigation={navigation} selected={this.state.selected} />
    </View>
  );
}

一覧取得を切り替える

Listコントロールでは、受け取ったprops.selectedの値によって表示を切り替えます。propsの値が変わった際には componentWillReceiveProps が呼ばれます。 nextProps.selected が 1 の時は選択したデータのみになります。

お気に入り一覧を取得する際には、Favoriteクラスからデータを取得します。includeメソッドで、同時に取得する関連オブジェクトを指定します。後は通常のニュース記事一覧と同じく、お気に入りに紐付いているitemだけをmap関数で取得します。

async componentWillReceiveProps(nextProps) {
  if (nextProps.selected === 1) {
    // Only favorited
    const Favorite = global.ncmb.DataStore('Favorite');
    const favs = await Favorite.include('item').fetchAll();
    this.setState({entries: favs.map(f => f.get('item'))});
  } else {
    await this.fetchData().done();
  }
}

Aclの利用

アプリを立ち上げた時点で匿名認証を使っていますので、お気に入りデータはAclによって自分だけが表示/削除できるデータとなっています。従ってお気に入りを取得する際に、自分のデータを取得するといった絞り込みは不要です。

まとめ

これだけでニュース記事一覧とお気に入り一覧の切り替えが実現できます。何らかのデータを一覧する、そのデータに対してアクションを起こす(今回はお気に入り登録)といったアプリはとても多いです。今回紹介した方法を応用して、React Native × NCMBによるアプリ開発に取り組んでみてください!

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。