React Native SDKを使ってニュースアプリを作る（お気に入り登録）

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

前回はアプリに匿名認証を組み込みました。今回はお気に入り登録&削除機能を作ります。

ナビゲーションバーにお気に入り登録用アイコンを表示する

React Nativeで、記事画面の右上に星アイコンを表示します。そして、アイコンをタップした際に、お気に入り登録処理を実行します。これは navigationOptions オプションを使って、ナビゲーションバーに情報を表示します。

static navigationOptions = ({ navigation }) => {
  const { state } = navigation;
  const { item } = state.params;
  return {
    headerTitle: item.get('title'),
    headerRight: <Icon name={state.params.favorited} class="fav" onPress={() => state.params.handleSave()} size={25} style={styles.fav}/>
  }
}

なお、このアイコン表示はすでにお気に入り登録されていた場合と、そうでない場合でアイコンを切り替えます。

constructor() {
  super();
  this.state = {
    favorited: 'star-o'
  }
}

アイコンを表示する際には componentDidMount の中で、すでにお気に入り登録しているかどうかを取得します。

async componentDidMount() {
  const options = {
    handleSave: () => this.saveToFav()
  };
  options.favorited = await this.isFavorited(this.props.navigation.state.params.item);
  this.props.navigation.setParams(options);
}

async isFavorited(item) {
  const fav = await this.getFavorite(item);
  return typeof fav === 'undefined' ? 'star-o' : 'star';
}

async getFavorite(item) {
  const Favorite = global.ncmb.DataStore('Favorite');
  return await Favorite
    .equalTo('item', item)
    .fetch();
}

タップした際のイベント処理

タップした際のイベント saveToFav は次のようになります。すでにお気に入り登録されている場合はお気に入り削除、まだの場合はお気に入り登録処理を行います。

async saveToFav() {
  const item = this.props.navigation.state.params.item
  const fav = await this.getFavorite(item);
  if (fav) {
    fav.delete();
  } else {
    this.save(item);
  }
  this.props.navigation.setParams({
    favorited: fav ? 'star-o' : 'star'
  });
}

保存処理を作る

では保存処理 save の説明です。Aclを使って、自分だけが見られる（削除できる）データとして作成します。こうすることで、お気に入りデータを安全に管理できます。

async save(item) {
  const Favorite = global.ncmb.DataStore('Favorite');
  const favorite = new Favorite;
  const user = await global.ncmb.User.currentUser();
  const acl = new ncmb.Acl;
  acl
    .setUserReadAccess(user, true)
    .setUserWriteAccess(user, true)
  await favorite
    .set('item', item)
    .set('acl', acl)
    .save();
}

まとめ

お気に入り登録処理ができましたので、次回はお気に入り一覧を取得する処理を作成します。

中津川 篤司

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