팝업 만들어 보기

여기서는 전에 2개 absoulte와 animation을 이용해서 팝업을 만들어 보겠습니다.

간단하게 밑에서 새창이 올라오도록 만들어 보죠.

어떻게 해야할까요?

일단 원래 있던 view를 가리기 떄문에 팝업은 absoulte position을 가지고 있겠군요. 그리고 밑에서 올라온다. 즉 style의 Top의 값이 animation 되겠다고 생각됩니다.

일단 여기까지 설명을 했으니 보지 않고 일단 만들어 보세요.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
} from 'react-native';

import Dimensions from 'Dimensions';

const height =  Dimensions.get('window').height;
const width = Dimensions.get('window').width;

class gitbookTestUI extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: new Animated.Value(100),
      popupTop: new Animated.Value(height)
    };
  }
  click(){
    if(this.state.x._value == 100){
      Animated.spring(
        this.state.x,
        {toValue: 200}
      ).start();
    }
    else{
      Animated.timing(
        this.state.x,
        {toValue: 100}
      ).start();
    }
  }
  popupOn(){
    if(this.state.popupTop._value != height){
      Animated.spring(
        this.state.popupTop,
        {toValue: height}
      ).start();
    }
    else{
      Animated.spring(
        this.state.popupTop,
        {toValue: 0}
      ).start();
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor: '#FFAAAA', flex: 1}}>
          <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
        </View>
        <View style={{flexDirection: 'row', flex: 1}}>
          <View style={{backgroundColor: '#FFAA00', flex: 1}}>
            <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
          </View>
          <View style={{backgroundColor: '#00AAAA', flex: 1}}></View>
        </View>
        <View style={{backgroundColor: '#FF00AA', flex: 1}}>
          <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
        </View>
        <TouchableOpacity onPress={this.click.bind(this)}>
          <Animated.View style={{position: 'absolute', backgroundColor: '#AAAAAA', right: this.state.x, bottom: 40, height: 30, width: 30}}></Animated.View>
        </TouchableOpacity>
        <Animated.View style={{position: 'absolute', backgroundColor: '#F0A055', height: height, width: width, top: this.state.popupTop, left: 0}}></Animated.View>
        <TouchableOpacity onPress={this.popupOn.bind(this)}>
          <View style={{position: 'absolute', backgroundColor: '#FFFFFF', width: 100, height: 100, borderRadius: 50, bottom: 50, left: 30}}>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

AppRegistry.registerComponent('gitbookTestUI', () => gitbookTestUI);

Dimensions는 현재 이 기기의 height와 width 를 가져올수 있습니다. google에 검색하시길 바랍니다.

그 외에는 아마 코드를 읽으면 금방 이해가 될 것 이라고 생각됩니다. 이해가 안된다면 한개씩 바꿔보시고, 그래도 안되면 앞의 예제를 다시한번 복습한뒤에 따라하시면 됩니다.