react-native(리액트 네이티브) API - LayoutEvent

react-native(리액트 네이티브) API - LayoutEvent

const React = require('react')

const ReactNative = require('react-native')

const {

Image, LayoutAnimation, StyleSheet, Text, View,

} = ReactNative

export default class LayoutEventExample extends React.Component {

state = {

viewStyle: {

margin: 20,

},

}

animateViewLayout = () => {

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring, () => {

console.log('layout animation done.')

this.addWrapText()

})

this.setState({

viewStyle: {

margin: this.state.viewStyle.margin > 20 ? 20 : 60,

},

})

}

addWrapText = () => {

this.setState(

{ extraText: 'And a bunch more text to wrap around a few lines.'},

this.changeContainer,

)

}

changeContainer = () => {

this.setState({ containerStyle: {width: 280}})

}

onViewLayout = (e) => {

console.log('received view layout event\n', e.nativeEnvent)

this.setState({ viewLayout: e.nativeEvent.layout})

}

onTextLayout = (e) => {

console.log('received text layout event\n', e.nativeEnvent)

this.setState({ textLayout: e.nativeEvent.layout})

}

onImageLayout = (e) => {

console.log('received image layout event\n', e.nativeEnvent)

this.setState({ imageLayout: e.nativeEvent.layout})

}

render() {

const viewStyle = [styles.view, this.state.viewStyle]

const textLayout = this. state.textLayout || {width: '?', height: '?'}

const imageLayout = this.state.imageLayout || { x: '?', y: '?'}

return (

<View sytle={this.state.containerStyle}>

<Text>

layout enents are called on.....message example....

<Text syles={styles.pressText} onPress={this.animateViewLayout}>

Press here to change layout.

</Text>

</Text>

<View ref="view" onLayout={this.onViewLayout} style={viewStyle}>

<Image

ref="img"

onLayout={this.onImageLayout}

style={styles.image}

source={{

uri:

'http://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png',

}}

/>

<Text>

ViewLayout: {' '}

{`${JSON.stringify(this.state.viewLayout,null, ' ')}\n\n`}

</Text>

<Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>

A simple piece of text.

{this.state.extraText}

</Text>

<Text>

{'\n'}

Text w/h: {textLayout.width}/{`${textLayout.height}\n`}

Image x/y: {imageLayout.x}/{imageLayout.y}

</Text>

</View>

</View>

)

}

}

var styles = StyleSheet.create({

view: {

padding: 12,

borderColor: 'black',

borderWidth: 0.5,

backgroundColor: 'transparent',

},

text: {

alignSelf: 'flex-start',

borderColor: 'rgba(0,0,255,0.2)',

borderWidth: 0.5,

},

image: {

width: 50,

height: 50,

marginBottom: 10,

alignSelf: 'center',

},

pressText: {

fontWeight: 'bold',

},

italicText: {

fontStyle: 'italic',

},

})

exports.title = 'Layout Events'

exports.description =

'message test111' +

'mesaage test222'

exports.examples = [

{

title: 'LayoutEventExample',

render() {

return <LayoutEventExample />

},

},

]