ReactNative小ネタ集

背景

ReactNativeとは、Facebookが開発しているJavaScriptでスマートフォンアプリが開発できるフレームワークです。
ReactNativeを使って開発を進めるにあたり、「これどうするのだろう」と思ったことがいくつかあったので、備忘録を兼ねてメモを共有します。

JSXの記述をコメントアウトする

Reactで使われるJSXのXMLとして記述する部分では、「<!-- -->」のようなコメントアウトが効かないようです。
そのため、記述を無効化したい場合は、「{」と「}」 で囲み、その中文頭に「//」を付けると、コメントアウトしたことになります。

{
  // 無効化したいJSX
  // <Text> サンプル </Text>
}

実行中のアイコンを表示する

ReactNativeがActivityIndicator提供しているので、それを使いました。
くるくる回る円です。

import { ActivityIndicator } from 'react-native'
<ActivityIndicator size="large" color="#0000ff" />

debug、staging、productionで設定を分ける

下記のページで解説されています。

React Native Android で development / staging / production を共存させる

何もしていないとreact-nativeでビルドしたアプリケーションは、debugもproductionも同じアプリidになり、ひとつの端末に異なるビルドのアプリを同時にインストールできません。
これをしておくとビルドの種類ごとにアプリのidを変えられるので、 異なるビルドのアプリを同時にひとつの端末にインストールできます。

開発時に個人的にお勧めしたい設定です。

プロジェクトに配置した画像を読み込む

下記のような記述でrequireを使って読み込めます。

相対パスで読み込む場合

<Image source={require('./image.png')} />

絶対パスで読み込む場合
your-project-nameは作成しているReactNativeのプロジェクト名に置き換えてください。

<Image source={require('your-project-name/path/of/image.png')} />

参考: How to Use Absolute Paths in React Native

端末の画像ファイルを読み込む

ファイルパスの先頭に「file://」を付けると、画像のuriとして扱えます。

<Image source={{uri: 'file://' + '/mobile/file/path/image.png'}} />

参考: React Native iOS read image from apps Documents folder

画像の大きさを取得する

requireがsourceの場合

resolveAssetSrouceを使います。

const imageSource = require('your-project-namepath/of/project/image.png')
const { width, height } = Image.resolveAssetSource(imageSource)

ファイルパスやurlなど、uriがsourceの場合

getSizeを使います。

const imageUri = 'file://' + '/some/path/image.png'
// const imageUri = 'http://some.com/url/image.png'
Image.getSize(imageUri, (w, h) => {..})

Viewのタッチを認識する

Viewのタッチやタッチしている座標を知りたい場合は、on**ShouldSetRendererをtrueにすると、タッチを監視してくれます。
これがtrueになっていないとonReponse*で値が取得できないので、知らないと戸惑います。

  <View 
    onStartShouldSetResponder={() => true}
    onMoveShouldSetResponder={() => true}
    onResponderMove={e => console.log('move', e.nativeEvent)}
    onResponderGrant={e => console.log('grant', e.nativeEvent)}
    onResponderRelease={e => console.log('release', e.nativeEvent)}
  >
    ..
  </View> 

参考:
View
re-natalでジョイスティックみたいなボタンを作る方法

TouchableHighlightを押したときの色変化を無効にする

underlayColorをnullにすると、TouchableHighlightをタッチしても、見た目が変化しなくなります。

  <TouchableHighlight
    underlayColor={null}
  >
    ..
  <TouchableHighlight>

参考: TouchableHighlight

react-navigationで、画面が表示されたときに実行する

react-navigationとは、画面の遷移やドロア（左からニュッと出てくる）メニューなどを提供してくれるライブラリです。
ReactNativeの解説ページでも紹介されているので、画面遷移に利用される有名なライブラリの一つだと思います。

そんなreact-navigationで画面が表示されたり戻るボタンで再描画されたときに処理を実行したい場合は、下記のようにwillFocusとして関数を登録します。

  componentWillMount() {
    this.props.navigation.addListener('willFocus', () => this.onWillFocus())
  }

  onWillFocus () {
    ..
  }

参考: Navigation prop reference: addListener

まとめ

メモとして残していたReactNativeに関するネタを共有しました。

何かの参考になれば嬉しいです。