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によるアプリ開発に取り組んでみてください！
