1.0.0 • Published 7 years ago

react-native-sf-modal v1.0.0

Weekly downloads
1
License
ISC
Repository
github
Last release
7 years ago

react-native-sf-modal

提示信息,消息

show show show

安装

npm install react-native-sf-modal

npm install andt-mobile --save

Props

parametertyperequireddescriptiondefault
titlestringyes标题null
infostringyes内容null
typestringno3种默认主题或自定义
cancelTextstringno取消按钮文字null
okTextstringno确认按钮文字null
cancelCallbackfuncno取消回调null
okCallbackfuncno确认回调null
bottomcomponentno自定义底部栏null
iconnumberno自定义图片路径null
iconWidthnumberno图片宽null
iconHeightnumberno图片高null

例子

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
import SFModal from 'react-native-sf-modal';

export default class App extends Component {
    render() {
        return (
            <View
                style={styles.container}>
                <Text
                    style={styles.welcome}
                    onPress={() => {
                        this.modal.setVisible(true);
                    }}>
                    Welcome to React
                    Native!
                </Text>
                <Text
                    style={styles.instructions}>
                    To get started, edit
                    App.js
                </Text>

                <SFModal
                    ref={(ref) => this.modal = ref}
                    type={'txt'}
                    title={'提示'}
                    info={'这是一条提示'}
                    cancelText={'取消'}
                    okText={'确定'}
                    cancelCallback={() => {
                        this.modal.setVisible(false);
                    }}
                    okCallback={() => {

                    }}/>
            </View>
        );
    }
}

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,
    },
});