react-native-dj-dialogwithcontent
v1.0.8
Published
daojia dialogwithcontent
Downloads
13
Readme
DialogWithContent
Install
npm i --save react-native-dj-dialogwithcontent
Usage
Using in your app will usually look like this:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Dialog from 'react-native-dj-dialogwithcontent';
export default class NPMTest extends Component {
testDialog(){
this.refs.dialog.show("提示");
}
_renderDialogContent(){
return(
<View style={{height:60}}>
<View>
<Text style={{fontSize: 14,color: "#333333",textAlign:'center'}}>删除后商品不能恢复</Text>
</View>
<View style={{height:10}}></View>
<View>
<Text style={{fontSize: 14,color: "#333333",textAlign:'center'}}>是否确定删除?</Text>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.testDialog.bind(this)}>
TestDialogWithContent press me!
</Text>
<Dialog ref="dialog" callback={()=>{alert('I am deleted!')}}
renderDialogContent={this._renderDialogContent.bind(this)}
titleStyle={{fontSize: 16, color: "#333333", textAlign: 'center',lineHeight:20}}
isRnNav='true'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('NPMTest', () => NPMTest);
Props
The following props can be used to modify the style and/or behaviour:
| Prop | Type | Opt/Required | Default | Note |
|---|---|---|---|---|
|isRnNav
|Boolean|Required|false
|是否正在使用RN导航,默认为false
|titleStyle
|Object|Option|{}
|标题样式
|leftStyle
|Object|Option|{}
|左边按钮样式
|rightStyle
|Object|Option|{}
|右边按钮样式
|renderDialogContent
|function|Required|()=>{}
|Dialog内容渲染函数
|callback
|function|Required|()=>{}
|右边按钮点击回调函数
Methods
The following methods can be used to open and close the Dialog:
| Method | Parameters | Note |
|---|---|---|
|show
|title: 标题、left:左边按钮文案、right:右边按钮文案
|调起控件.