react native 實現modal的自適應大小

1.設置modal的寬度爲固定，長度根據內容多少變化

2.在另一個頁面引入modal時，可以根據需求添加圖片，title或改變佈局，modal仍可以自適應

總體來說，定義一個modal可以在不同的頁面引用，根據modal模板轉化爲不同的形式

modal.js如下：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Modal,
    Easing,
    Animated,
    Image,
    TouchableOpacity,
    Navigator
} from 'react-native';
import Dimensions from 'Dimensions';
let width=Dimensions.get("window").width;
let height=Dimensions.get("window").height;


var image_Arr=[require('./image/icon/alert1.png'),require('./image/icon/alert2.png'),require('./image/icon/alert3.png')];
export default class Alertcom extends Component
{
    constructor(props) {
        super(props);
        this.state ={isvisible:false,sure:false};
  render(){

        return(
            <Modal
                animationType='fade'//進場動畫 fade*/*/}
                onRequestClose={() =>{}}
                onShow={()=>{this.showin()}}
                visible={this.props.isvisible}//是否可見
                transparent={true} //背景透明
            >
                <View style={styles.container}>
<View style={styles.dialog}>

判斷modal是否有title

{
                            (this.props.title==undefined)?<Text></Text>:
                                <View style={styles.title}>
                                <Text style={{fontSize:18,flex:1,marginTop:15,alignSelf:'center'}}>提示</Text>
                                    <View style={styles.dividerview}>
                                        <View style={{height: 1, backgroundColor: '#ECEDF1',flex:1}}></View>
                                    </View>
                                    </View>

                        }

判斷是否有圖片

 <View style={styles.First}>

                            {
                                (this.props.noticetype==undefined)?<Text></Text>:
                                   < Image source={this.props.noticetype} style={styles.image}/>
                            }


                                <Text style={styles.text}>
                            jjjkkkkkkkkkkkkkkkkkkkkkbsj
                        </Text>


                        </View>

判斷最下一欄的按鈕

 <View style={styles.dividerview}>
                            <View style={styles.divider}></View>
                        </View>


                            <View style={styles.second}>
                                <TouchableOpacity   onPress={this.props.close()} style={{flex:1}} >
                                <Text style={styles.close}>關閉</Text>
                                </TouchableOpacity>
                                {

                                    (this.props.sure==undefined)?<Text></Text>:
                                        <TouchableOpacity onPress={this.props.close()} style={{flex:1}} >
                                    <Text style={styles.sure}>確定</Text>
                                        </TouchableOpacity>

                                }
                            </View>
</View>
</Modal>
）
}
}

樣式如下：

const styles = StyleSheet.create({
    container: {
        width:width,
        height:height,
        backgroundColor: 'rgba(0,0,0,0.25)',
        justifyContent: 'center',
        alignItems: 'center',
        flex:1,
        position:'absolute',
    },
    dialog:{
        width:width*0.8,
        backgroundColor:'#FFFFFF',
        borderRadius: 8,
    },
    title:
    {
        height:55,
    },
    First:{
      flexDirection:'row',
    },
    text:{
        fontSize:15,
        margin:30,
        flex:1,
    },
    image:
    {
        width:44,
        height:44,
        backgroundColor:'#000000',
        marginLeft:30,
        marginTop:30,
        marginBottom:30,
        backgroundColor:'transparent',

    },
    texttwo:{
        fontSize:15,

        marginRight:20,

    },
    dividerview: {
        flexDirection: 'row',
    },
    divider: {
        flex: 1,
        height: 1,
        backgroundColor: '#ECEDF1',
    },
    second: {
        flexDirection:'row',
        alignItems:'center',
        height:55,
    },
    close:{
        fontSize:18,
        textAlign:'center',
        color:'#485abc'
    },
    sure:{
        fontSize:18,
        textAlign:'center',
        color:'#485abc'
    }
});

在別的頁面引入modal.js,怎麼使用modal以及觸發過程略，重點展示怎麼讓modal模板根據需求展示不同樣式,import Al from './../modal';這句話不能少

1.最原始的modal

 <Al isvisible={this.state.Visible}
  close={()=>this.hideDialog.bind(this)}
 >
 </Al>

2.帶有title的modal

<Al isvisible={this.state.Visible}
  close={()=>this.hideDialog.bind(this)}
   title={true}
 >
 </Al>

3.最下方按鈕發生變化的modal

<Al isvisible={this.state.Visible}
  close={()=>this.hideDialog.bind(this)}
   title={true}
   sure={true}
 >
 </Al>

4.帶有圖片的modal,中間部分的上下左右間距是30

<Al isvisible={this.state.Visible}
  close={()=>this.hideDialog.bind(this)}
   title={true}
   sure={true}
   noticetype={require('./../image/icon/alert2.png')}
 >
 </Al>

這樣就可以隨意排列組合了