技術ブログを開設する
ログイン
もっと気軽にアウトプットできる技術ブログプラットフォーム

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
@divrots0の技術ブログ
0
このエントリーをはてなブックマークに追加