left col ack oid ios 無法 ani load rtc

北京-賽車源碼出售Q1446595067開發中，為了和ios效果保持一致，有些控件需要自己定義，如在警告彈框中，React Native本來已經提供了Alert控件，但是其效果在Android上是非常的醜陋的，所以為了滿足產品同學的需要，只能自定義了。下面是其實現的效果：
這裏寫圖片描述

實現也非常的簡單，使用Modal來進行自定義控件即可，下面是相關的代碼。

import React, {Component} from ‘react‘;
import PropTypes from ‘prop-types‘;

import {
StyleSheet,
Text,
View,
Modal,
TouchableOpacity,

Dimensions
} from ‘react-native‘;

let {width, height} = Dimensions.get("window");

export default class HRAlertView extends Component {

//定義靜態的屬性,可以通過this.props.alertTitle傳值
static propTypes = {
    alertTitle: PropTypes.string,      //標題
    alertContent: PropTypes.string,  //文本內容
    cancleName: PropTypes.string,     //取消
    conformName: PropTypes.string,        //確定
}

constructor(props) {
    super(props);

    this.state = ({
        isShow: false,
        conformName:‘確定‘,
        cancleName:‘取消‘,
    })
}

render() {
    if (!this.state.isShow) {
        return null;
    } else {
        return (
            <Modal
                visible={this.state.isShow}
                //顯示是的動畫默認none
                //從下面向上滑動slide
                //慢慢顯示fade
                // animationType={‘fade‘}
                onRequestClose={() => {

                }}
            >
                <View style={styles.containerStyle}>
                    {
                        this.renderMongoliaView()
                    }
                    {
                        this.renderAlertView()
                    }
                </View>
            </Modal>
        )
    }
    ;
}

//蒙層背景
renderMongoliaView() {
    return (
        <TouchableOpacity style={styles.bgContainViewStyle}
                          onPress={() => this.hideAlertView()}>
            <View></View>
        </TouchableOpacity>
    );
}

//繪制Alert視圖
renderAlertView() {
    return (
        <View style={styles.alertViewStyle}>
            <View style={styles.titleContainerStyle}>
                <Text style={styles.titleStyle}>{this.props.alertTitle}</Text></View>
            <View style={styles.contentContainerStyle}>
                <Text style={styles.contentStyle}>{this.props.alertContent}</Text></View>
            <View style={styles.horizontalLineStyle}/>

            <View style={styles.btnContainerStyle}>
                <TouchableOpacity onPress={() => {
                    this.dissmissDialog(0);
                    this.dissmissDialog();
                    this.props.comformClik ? this.props.comformClik() : null
                }} style={styles.btnStyle}>
                    <Text style={{fontSize: 16, color: ‘#157efb‘, fontWeight: ‘700‘}}>{this.props.conformName}</Text>
                </TouchableOpacity>

                <View style={styles.verticalLineStyle}/>

                <TouchableOpacity onPress={() => {
                    this.dissmissDialog(0);
                    this.dissmissDialog();
                    this.props.cancelClick ? this.props.cancelClick() : null
                }} style={styles.btnStyle}>
                    <Text style={{fontSize: 16, color: ‘#157efb‘}}>{this.props.cancleName}</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

hideAlertView() {
    this.setState({
        isShow: false,
    });
}

//顯示
showDialog() {
    this.setState({
        isShow: true,
    })
}

//消失彈窗，最好delay0.3秒
dissmissDialog = (delay) => {
    let duration = delay;
    this.timer = setTimeout(() => {
        this.setState({
            isShow: false,
        });
        this.timer && clearTimeout(this.timer);
    }, duration * 1000);
}
 

}

const styles = StyleSheet.create({
bgContainViewStyle: {
height: height,
width: width,
position: ‘absolute‘,
opacity: 0.4,
backgroundColor: ‘rgb(0,0,0)‘,
},
containerStyle: {
flex: 1,
top: 0,
left: 0,
right: 0,
bottom: 0,
position: ‘absolute‘,
justifyContent: ‘center‘,
},
alertViewStyle: {
backgroundColor: ‘white‘,
borderRadius: 10,

borderWidth: 1,
height: 130,
marginLeft: 50,
marginRight: 50,
borderColor: ‘lightgrey‘,
},
titleContainerStyle: {
justifyContent: ‘center‘,
alignItems: ‘center‘,
marginLeft: 15,
marginRight: 15,
height: 30
},
titleStyle: {
fontSize: 18,
fontWeight: ‘900‘
},
contentContainerStyle: {
justifyContent: ‘center‘,
alignItems: ‘center‘,
height: 50
},
contentStyle: {
justifyContent: ‘center‘,
marginLeft: 20,
marginRight: 20,
fontSize: 14,
},
horizontalLineStyle: {
height: 0.5,
backgroundColor: ‘lightgrey‘
},
btnContainerStyle: {
flexDirection: ‘row‘,
width: width - 100,
height: 48
},
verticalLineStyle: {
height: 50,
backgroundColor: ‘lightgrey‘,
width: 0.5
},
btnStyle: {
flex: 1,
height: 47,
justifyContent: ‘center‘,
alignItems: ‘center‘
},

});

然後是測試的文件：

import React, {Component} from ‘react‘;
import {
View,
Text,
StyleSheet, Platform,
} from ‘react-native‘;

import RNAlertView from ‘./view/HRAlertView‘;

const instructions = Platform.select({
ios: ‘Press Cmd+R to reload,\n‘ + ‘Cmd+D or shake for dev menu‘,
android:
‘Double tap R on your keyboard to reload,\n‘ +
‘Shake or press menu button for dev menu‘,
});

export default class AlertDialogTest extends Component {

render() {
    return (
        <View style={styles.container}>

            {this._renderAndroidAlert()}

            <Text style={styles.instructions}>{instructions}</Text>

            <Text style={styles.welcome} onPress={() => this._show()}>
                點我->彈出框
            </Text>
        </View>
    );
}

_renderAndroidAlert() {
    return(
        <RNAlertView ref=‘alert‘ conformName={‘確定‘} cancleName={‘取消‘}
                     alertTitle={‘刪除提示‘} alertContent={‘執行此操作後，將無法關註該聯系人，請確認‘}
                     comformClik={() => {
                         this._confirm()
                     }}
                     dissmissClick={() => {
                         this._cancel()
                     }}
        />
    );

}

_show = () => {
    this.refs.alert && this.refs.alert.showDialog();
}

_confirm = () => {
    alert(‘點擊了確定‘)
};

_cancel = () => {
    alert(‘點擊了取消‘)
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},

welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
},
instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
},

});

React Native自定義北京-賽車源碼出售彈出警告框