react-native modal

1.属性

animationType（动画类型） PropTypes.oneOf([‘none’, ‘slide’, ‘fade’])

　　none：没有动画
　　slide：从底部滑入
　　fade：淡入视野

onRequestClose（被销毁时会调用此函数）Platform.OS ===’android’？PropTypes.func.isRequired：PropTypes.func

　　在 ‘Android’ 平台，必需使用此函数

onShow（模态显示的时候被调用）function

transparent (透明度) bool

　　true时，使用透明背景渲染模态。

visible（可见性） bool

　　决定模态是否可见

onOrientationChange（方向改变时调用）PropTypes.func

　　在模态方向变化时调用，提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用，但是不考虑当前方向。

supportedOrientations（允许模态旋转到任何指定取向）PropTypes.arrayOf(PropTypes.oneOf([‘portrait’, ‘portrait-upside-down’, ‘landscape’，’landscape-left’，’landscape-right’]））

　　在iOS上，模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。

2.modal 基本使用

export default class TestModal extends Component {
	// 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isModal:false
        };
    }

    showModal() {
        this.setState({
            isModal:true
        })
    }

    onRequestClose() {
        this.setState({
            isModal:false
        });
    }

    render() {
        return(
            <View style={styles.container}>
                {/* 初始化Modal */}
                <Modal
                    animationType='slide'           // 从底部滑入
                    transparent={false}             // 不透明
                    visible={this.state.isModal}    // 根据isModal决定是否显示
                    onRequestClose={() => {this.onRequestClose()}}  // android必须实现
                >
                    <View style={styles.modalViewStyle}>
                        {/* 关闭页面 */}
                        <TouchableOpacity
                            onPress={() => {{
                                this.setState({
                                    isModal:false
                                })
                            }}}
                        >
                            <Text>关闭页面</Text>
                        </TouchableOpacity>
                    </View>
                </Modal>

                {/* 返回按钮 */}
                <TouchableOpacity
                    onPress={() => {{
                        this.props.navigator.pop()
                    }}}
                >
                    <Text>返回</Text>
                </TouchableOpacity>

                {/* 模态跳转 */}
                <TouchableOpacity
                    onPress={() => this.showModal()}
                >
                    <Text>模态跳转</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

　　

3.modal 使用 —— 指示器

export default class TestModal extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isModal:false
        };
    }

    showModal() {
        this.setState({
            isModal:true
        })

        setTimeout(() => {
            this.setState({
                isModal:false
            });
        }, 1500)
    }

    onRequestClose() {
        this.setState({
            isModal:false
        });
    }

    render() {
        return(
            <View style={styles.container}>
                {/* 初始化Modal */}
                <Modal
                    animationType='fade'            // 淡入淡出
                    transparent={true}              // 透明
                    visible={this.state.isModal}    // 根据isModal决定是否显示
                    onRequestClose={() => {this.onRequestClose()}}  // android必须实现
                >
                    <View style={styles.modalViewStyle}>
                        <View style={styles.hudViewStyle}>
                            <ActivityIndicator style={styles.chrysanthemumStyle}></ActivityIndicator>
                            <Text style={styles.hudTextStyle}>加载中…</Text>
                        </View>
                    </View>
                </Modal>

                {/* 返回按钮 */}
                <TouchableOpacity
                    onPress={() => {{
                        this.props.navigator.pop()
                    }}}
                >
                    <Text>返回</Text>
                </TouchableOpacity>

                {/* 显示指示器 */}
                <TouchableOpacity
                    onPress={() => this.showModal()}
                >
                    <Text>显示指示器</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

效果图