昨日はReact Nativeやってるよーな話を書きました。今日超具体的なライブラリの小ネタを書きます。長いのはたまにしか書けないね。
読み込み時のクルクルについてです。React Nativeには標準でローディングインジケーターが用意されています。
なんだけど、色や大きさなどちょっとしたオプションしかなく、テキストと一緒に表示させることができません。もちろんTextと一緒に使えばいいし、コンポーネントを作ってもいいし。
でもまあ、これだけ汎用的なコンポーネントはさっさとパッケージを使うのが良いと思います。個人的には部品になるようなUIコンポーネントは積極的に使う派です。
ざっくり探すと2つのライブラリが見つかりました。
1つ目が、react-native-loading-spinner-overlay
2つ目は、react-native-busy-indicator
前者のほうが2018/04/09時点でスター数が700近くと、後者の8倍近くのスター数です。前者のほうが最終更新が古いもののスター数を考えるとこちらでいいかな。react-native-loading-spinner-overlayを試します。
コード
GitHubのREADMEにあるアニメーション画像では、テキストが入っていないので雰囲気がわかりません。そこで文字ありの雰囲気がわかるようにしてみます。
何はともあれインストールとインポート。
$ npm install --save react-native-loading-spinner-overlay@latest
1import Spinner from 'react-native-loading-spinner-overlay';
そして、ひとまず常に表示する形でコンポーネントを追加してみましょう。
1class MyComponent extends React.Component {
2 render() {
3 return (
4 <View style={{ flex: 1, justifyContent: 'space-around' }}>
5 <Button title="ボタン" onPress={() => console.log('ボタン')} />
6 <Spinner
7 visible
8 textContent="読み込み中"
9 textStyle={{ color: 'white' }}
10 />
11 </View>
12 );
13 }
14}
すると、このように表示されます。
背後にボタンを置いていますが、ローディングインジケータのオーバーレイがあるためボタンをタップすることはできません。ユーザーに操作させずに待たせることができます。
オーバーレイの色が薄いと白文字や白インジケータが見にくいかもしれません。
1overlayColor="rgba(0, 0, 0, 0.5)"
2
3// デフォルトは
4// overlayColor="rgba(0, 0, 0, 0.25)"
ちょっと暗くするといい感じです。
簡易に使うには便利です。
（まあ、React NativeのUIライブラリ系は簡易に使うのは便利だけど、ちょっと凝りたくなると結局自前コンポーネントにせざるを得ないってことが多いんですけどね。）