ReactNativeで動的に要素のサイズを測りたい

公開日:2019-02-12
最終更新:2019-02-12

ReactNativeで描画された<View>タグとかの高さや幅をとりたい。

方法1 onLayout propsをつかう

(参考)
https://facebook.github.io/react-native/docs/view#onlayout

onLayoutView(layout){  
    const {x, y, width, height} = layout;  
    console.warn(x);  
    console.warn(y);  
    console.warn(width);  
    console.warn(height);  
}  

render(){  
    return(  
        <View onLayout={e=>this.onLayoutView(e.nativeEvent.layout)}>  
            {~~~~~~~~}  
        </View>  
    )  
}

利点

  • propsでできるのでシンプル

注意点

  • onLayoutメソッドは最初の描画時と、デバイスを回転させて描画が変わる時にしか走らないんです。

方法2 ref貼ってmeasure()メソッド走らせる

(参考)
https://github.com/facebook/react-native/issues/953#issuecomment-95687732
https://facebook.github.io/react-native/docs/direct-manipulation#measurecallback

getContainerDimension(){  
    if(!this.container)return;  

    this.container.measure((x, y, width, height, pageX, pageY)=>{  
        console.warn(x);  
        console.warn(y);  
        console.warn(width);  
        console.warn(height);  
    })  
}  

render(){  
  return(  
    <View ref={r=>this.container=r}>  
        {~~~~~~~~}  
    </View>  
  )  
}  

componentDidUpdate(){  
    setTimeOut(this.getContainerDimension) //<---setTimeOut大事  
}

利点

いつでも好きなときに走らせることができる.

注意点

  • 一回描画した後じゃないとrefに登録されない
  • 描画後すぐに(同じfluxサイクルの中で)新しいサイズを測りたいときは、componentDidUpdate(描画後に走る)の中でさらにsetTimeOutをかけて非同期かつ直後に走るようにする。
記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@divrots0の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする