react native + algolia search 実装 #reactnative

react native + algolia search 実装

algoliaに登録、インデックスの作成

algolia.comから、アカウント作成。
必要なindexを作成する。dashboard画面にいけたら完了。
左のメニューからapi keysに移動し、値を控える。

npm install

npm install --save algoliasearch

使用方法

これは自分のやり方なのですが、以前firebaseの記事にあったやり方を参考にさせていただいています。

algolia.js


import algoliasearch from 'algoliasearch';
import CONFIG from './config';

const algolia = algoliasearch(
    CONFIG.appID,
    CONFIG.appKey
); 

export default algolia;

config.js

export default {
    appID:'/*控えた値*/',
    appKey:'/*控えた値*/'
}

コンポーネント側

component.js

import algolia from 'algolia.js';

.
.
.

const index_user = algolia.initIndex('user');

.
.
.

<TextInput
    style={styles.searchBox} 
    clearButtonMode='always' 
    placeholder='検索'
    underlineColorAndroid='rgba(0,0,0,0)'
    onSubmitEditing={(event)=>{
      index_user.search({
         query:event.nativeEvent.text,
      },(err,content)=>{
          console.log(content.hits);/*content.hitsが検索結果*/
      });
     }} />

もっと詳しいリファレンスは公式ページを見てください。