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

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

const React = require('react')

const ReactNative = require('react-native')

const {

LayoutAnimation,

StyleSheet,

Text,

View,

TouchableOpacity,

} = ReactNative

class AddRemoveExample extends React.Component {

state = {

views : [],

}

UNSAFE_componentWillUpdate() {

LayoutAnimation.easeInEaseOut()

}

_onPressAddView = () => {

this.setState(state => ({ views: [...state.views, {}] }))

}

_onPressRemoveView = () => {

this.setState(state => ({ views: state.views.slice(0, -1)}))

}

render() {

const views = this.state.views.map((view, i) => (

<View key={i} style ={styles.view}>

<Text>{i}</Text>

</View>

))

return(

<View style={styles.container}>

<TouchableOpacity onPress={this._onPressAddView}>

<View style={styles.button}>

<Text>Add view</Text>

</View>

</TouchableOpacity>

<TouchableOpacity onPress={this._onPressRemoveView}>

<View style={styles.button}>

<Text>Remove view</Text>

</View>

</TouchableOpacity>

<View style={styles.viewContatiner}>{views}</View>

</View>

)

}

}

const GreenSquare = () => (

<View style={styles.greenSquare}>

<Text>Green square</Text>

</View>

)

const BlueSquare = () => (

<View style={styles.blueSquare}>

<Text>Blue square</Text>

</View>

)

class CrossFadeExample extends React.Component {

state = {

toggled: false,

}

_onPressToggle = () => {

LayoutAnimation.easeInEaseOut()

this.setState(state => ({ toggled: !state.toggled}))

}

render() {

return(

<View style={styles.container}>

<TouchableOpacity onPress={this._onPressToggle}>

<View style={styles.button}>

<Text>Toggle</Text>

</View>

</TouchableOpacity>

<View style={styles.viewContainer}>

{this.state.toggled ? <GreenSquare /> : <BlueSquare />}

</View>

</View>

)

}

}

class LayoutUpdateExample extends React.Component {

state = {

width: 200,

height: 100,

}

timeout = null

componentWillUnmount() {

this._clearTimeout()

}

_clearTimeout = () => {

if (this.timeout !== null) {

clearTimeout(this.timeout)

this.timeout = null

}

}

_onPressToggle = () => {

this._clearTimeout()

this.setState({ width: 150 })

LayoutAnimation.configureNext({

duration: 1000,

update: {

type: LayoutAnimation.Types.linear,

},

})

this.timeout = setTimeout(() => this.setState({width: 100}), 500)

}

render() {

const { width, height} = this.state

return (

<View style={styles.container}>

<TouchableOpacity onPress={this._onPressToggle}>

<View style={styles.button}>

<Text>Make box square</Text>

</View>

</TouchableOpacity>

<View style={[styles.view, {width, height}]}>

<Text>

{width}x{height}

</Text>

</View>

</View>

)

}

}

export default class LayoutAnimationExample extends React.Component {

render() {

return(

<View style={styles.container}>

<Text>Add and remove views</Text>

<AddRemoveExample />

<Text>{'\n'}{'\n'}{'\n'}{'\n'}</Text>

<Text>Cross fade views</Text>

<CrossFadeExample />

<Text>{'\n'}{'\n'}{'\n'}{'\n'}</Text>

<Text>Layout update during animation</Text>

<LayoutUpdateExample />

</View>

)

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

},

button: {

borderRadius: 5,

backgroundColor: '#eeeeee',

padding : 10,

marginBottom: 10,

},

buttonText: {

fontSize: 16,

},

viewContainer: {

flex: 1,

flexDirection: 'row',

flexWrap: 'wrap',

},

view: {

height: 54,

width : 54,

backgroundColor: 'red',

margin: 8,

alignItems: 'center',

justifyContent: 'center',

},

greenSquare: {

width: 150,

height: 150,

backgroundColor: 'green',

alignItems: 'center',

justifyContent: 'center',

},

blueSquare: {

width: 150,

height: 150,

backgroundColor: 'blue',

alignItems: 'center',

justifyContent: 'center',

},

})