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(); }
まとめ
お気に入り登録処理ができましたので、次回はお気に入り一覧を取得する処理を作成します。