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>

这样就可以随意排列组合了