팝업 다이얼로그 ver2

import React, { Component } from 'react';
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    Animated,
    Linking
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import Util_String from './Util_String'
import AsyncStorage from '@react-native-async-storage/async-storage';
import API from './API'

const height = (Dimensions.get('window').height) * 0.8 // X 버튼 높이 30
const width =  Dimensions.get('window').width
const btn_layout_height = 85

class PopUp_Dialog_ver1 extends Component {

    constructor(props) {
        super(props)

        let data = props.route.params.data == undefined? null: props.route.params.data
        let b_data = data == null ? null : data.b_data  
        let b_type = data == null ? null : data.b_type  

        //console.log("params : ",props.route.params)
        props.navigation.setOptions({
            headerShown: false,
            cardOverlayEnabled: true,
            cardStyle: {
                backgroundColor: 'transparent',
            },
            cardStyleInterpolator: ({ current: { progress } }) => ({
                cardStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 0.5, 0.9, 1],
                        outputRange: [0, 0.25, 0.7, 1],
                    }),
                },
                overlayStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                        extrapolate: 'clamp',
                    }),
                },
            }),
        });

        this.state = {
            data,
            image_hight: 0,
            b_data,
            b_type, // 0 : 외부링크  1: 앱내이동 ( 포트폴리오 )  2: ( 테마 )
        }
    }

    click(mode) {
        if (mode == 1) {
            // 쉐어드에 저장
            // 날짜 저장
            let today = Util_String.get_today_date('')
            this.save_local(today)
        }
        this.props.navigation.goBack()
    }

    async save_local(today) {
        let data = {
            today: today,
        }
        try {
            let datas = JSON.stringify(data)
            AsyncStorage.setItem(API.Pop_AS_key, datas)

        } catch (e) {
            console.log(" Async Storaage 저장 에러" + e)
        }
    }

    goto_link() {
        const { b_type, b_data, data } = this.state
        // console.log("b_data : ",b_data)
        //console.log("data : ",data)
        if (b_type != null && b_type == '0') {
            if (b_data.link_url == 'https://' || b_data.link_url == '') {

            } else {
                Linking.openURL(b_data.link_url);
            }
        } else {
            this.props.route.params.callback(data)
        }
    }

    resize_Image(data) {
        // console.log(data.nativeEvent.source)
        let image_h = height
        let layout_h = 0
        if (height < data.nativeEvent.source.height) {
            //console.log("이미지가 큰경우")
            // 이미지가 큰경우 
            image_h = data.nativeEvent.source.height
            layout_h = height
        } else {
            //console.log("이미지가 작은")
            image_h = data.nativeEvent.source.height
            layout_h = data.nativeEvent.source.height
        }
        this.setState({
            image_hight: image_h,
            layout_h: layout_h,
        })
    }


    render() {
        const {  b_data, image_hight, layout_h } = this.state
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                <TouchableOpacity
                    style={style.d_background}
                    activeOpacity ={1}
                >
                    <View
                        style={{...style.d_layout, height: layout_h}}>

                        <TouchableOpacity
                            style={{ height: 20, marginBottom: 10, backgroundColor: 'transparent', alignItems: 'flex-end' }}
                            activeOpacity={1}
                            onPress={() => this.click(2)}
                        >
                            <Image
                                style={{ height: 20, width: 20 }}
                                source={require('../images/icons/btn_close.png')}
                            />
                        </TouchableOpacity>

                        <ScrollView
                            style={{ backgroundColor: 'white' }}
                        >
                            {b_data == null ?
                                // <></>
                                <Image
                                    onLoad={(e) => this.resize_Image(e)}
                                    // style={{ height: image_hight,  width: undefined , aspectRatio: 3 / 4  , backgroundColor:'transparent'}}
                                    style={{ height: image_hight, width: 322 }}
                                    resizeMode='contain'
                                    //   source={require('../../../images/guide/00_Main.jpg')}
                                    source={require('../images/guide/10_02_03_회원가입완료.jpg')}
                                />
                                :
                                <Image
                                    onLoad={(e) => this.resize_Image(e)}
                                    // style={{ height: image_hight,  width: undefined , aspectRatio: 3 / 4  , backgroundColor:'transparent'}}
                                    style={{ height: image_hight, width: 322 }}
                                    // resizeMode='contain'
                                    //   source={require('../../../images/guide/00_Main.jpg')}
                                    source={{ uri: b_data.image }}
                                />
                            }

                        </ScrollView>

                        <View style={{ 
                            height: btn_layout_height }}>
                            <TouchableOpacity
                                activeOpacity={1}
                                style={style.btn_1}
                                onPress={() => this.goto_link()}
                            >
                                <Text style={style.text_btn1}>자세히보기</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                activeOpacity={1}
                                style={style.btn_2}
                                onPress={() => this.click(1)}
                            >
                                <Text style={style.text_btn2}>오늘 안보기</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                </TouchableOpacity>
                
            </View>
        )
    }
}

const style  = StyleSheet.create({
    
    d_background : {
        flex: 1,
        width: width,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00000080'
    },

    d_layout : {
        width: 322,
        backgroundColor: 'transparent',
        overflow: 'hidden',
    },

    btn_1:{
        justifyContent: 'center', 
        alignItems: 'center',
        flex: 1, 
        backgroundColor: "white"
    },

    btn_2:{
        marginTop: 15,
        backgroundColor: 'transparent',
        justifyContent:'center',
        alignItems:'center'
    },

    text_btn1:{
        color: "black"
    },

    text_btn2:{
        color: "white",
        textDecorationLine: 'underline'
    }

})

export default PopUp_Dialog_ver1

 

 

세로가 길때 비율 처리

import React, { Component } from 'react';
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    Animated,
    Linking
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import AppStyle from '../../../AppStyle'
import Util_String from '../../../W_Util/Util_String'
import AsyncStorage from '@react-native-community/async-storage';
import API from '../../../W_Util/API'

const height = (Dimensions.get('window').height) + 30 // X 버튼 높이 30
const height2 = (Dimensions.get('window').height)
const width =  Dimensions.get('window').width
const btn_layout_height = 60 + 25

const content_height = height-btn_layout_height// X 버튼 높이 30

class PopUp_Dialog extends Component {

    constructor(props) {
        super(props)

        let data = props.route.params.data
        let b_data = props.route.params.data.b_data
        let b_type = props.route.params.data.b_type

        //console.log("params : ",props.route.params)
        props.navigation.setOptions({
            headerShown: false,
            cardOverlayEnabled: true,
            cardStyle: {
                backgroundColor: 'transparent',
            },
            cardStyleInterpolator: ({ current: { progress } }) => ({
                cardStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 0.5, 0.9, 1],
                        outputRange: [0, 0.25, 0.7, 1],
                    }),
                },
                overlayStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                        extrapolate: 'clamp',
                    }),
                },
            }),
        });

        this.state = {
            data,
            image_hight: 0,
            b_data,
            b_type, // 0 : 외부링크  1: 앱내이동 ( 포트폴리오 )  2: ( 테마 )
        }
    }

    click(mode) {
        if (mode == 1) {
            // 쉐어드에 저장
            // 날짜 저장
            let today = Util_String.get_today_date('')
            this.save_local(today)
        }
        this.props.navigation.goBack()
    }

    async save_local(today) {
        let data = {
            today: today,
        }
        try {
            let datas = JSON.stringify(data)
            AsyncStorage.setItem(API.Pop_AS_key, datas)

        } catch (e) {
            console.log(" Async Storaage 저장 에러" + e)
        }
    }

    goto_link() {
        const { b_type, b_data, data } = this.state
        // console.log("b_data : ",b_data)
        //console.log("data : ",data)
     /*    if (b_type == '0') {
            if (b_data.link_url == 'https://' || b_data.link_url == '') {

            } else {
                Linking.openURL(b_data.link_url);
            }
        } else {
            this.props.route.params.callback(data)
        } */
    }

    resize_Image(data) {
        // console.log(data.nativeEvent.source)
        let image_h = data.nativeEvent.source.height
        let image_w = data.nativeEvent.source.width


        this.setState({
            image_hight: parseInt(image_h) ,
            image_w:image_w,
            image_ratio :image_w/image_h  // 이미지의 비율을 구한다.
        })
    }


    render() {
        const { data, b_data, image_hight,image_w,image_ratio, layout_h } = this.state
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                <View
                    style={{
                        flex: 1,
                        width: width,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#00000080'
                    }}
                    activeOpacity ={1}
                >
                    <View
                        style={{
                            width: width*0.8,
                            height: undefined,
                            backgroundColor: 'transparent',
                        }}>

                        <TouchableOpacity
                            style={{ height: 20, marginBottom: 10, backgroundColor: 'transparent', alignItems: 'flex-end' }}
                            activeOpacity={1}
                            onPress={() => this.click(2)}
                        >
                            <Image
                                style={{ height: 20, width: 20 }}
                                source={require('../../../images/icons/btn_close.png')}
                            />
                        </TouchableOpacity>

                        <View style={{
                            width:'100%',
                            backgroundColor: 'transparent',
                            aspectRatio: 450 / 500
                        }}>

                            <ScrollView
                                showsVerticalScrollIndicator={false}
                                style={{
                                    backgroundColor: 'white',
                                    width: '100%'
                                }}
                            >

                                <Image
                                    onLoad={(e) => this.resize_Image(e)}
                                    style={{ height: undefined, width: '100%', aspectRatio: image_ratio }}
                                    resizeMode='contain'
                                    source={require('../../../images/test_banner.jpg')}
                                    //source={require('../../../images/guide/00_member_input_01_약관동의.jpg')}
                                />
                            </ScrollView>
                        </View>
                        
                        <View style={{ height: btn_layout_height }}>
                            <TouchableOpacity
                                activeOpacity={1}
                                style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: AppStyle.fontColorBlue }}
                                onPress={() => this.goto_link()}
                            >
                                <Text style={{ color: AppStyle.fontColorWhite }}>자세히보기</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                activeOpacity={1}
                                style={{ backgroundColor: 'transparent', marginTop: 15 }}
                                onPress={() => this.click(1)}
                            >
                                <Text style={{
                                    color: AppStyle.fontColorWhite,
                                    textDecorationLine: 'underline'
                                }}>오늘 안보기</Text>
                            </TouchableOpacity>

                        </View>
                    </View>

                </View>
                
            </View>
        )
    }
}

export default PopUp_Dialog