This is a custom component for React Native, a simple popup, compatible with ios and android.
###Props
- isOverlay bool -
default true
- isOverlayClickClose bool -
default true
### Methodsstatic
- alert(
message
: string|number, [...])
e.g.
this.popup.alert(1);
this.popup.alert(1, 'two', '10 messages at most');
- tip({
title
: string,content
: string|number|array<string|number>isRequired
,btn
: {title
: stringdefault 'OK'
,callback
: function}, })
e.g.
this.popup.tip({
content: 'come on!',
});
this.popup.tip({
title: 'TipTip',
content: 'come on!',
});
this.popup.tip({
content: ['come on!', 'go!'],
btn: {
text: 'OKOK',
style: {
color: 'red'
},
callback: () => {
this.popup.alert('over!');
},
},
});
- confirm({
title
: string,content
: string|number|array<string|number>isRequired
,ok
: {title
: stringdefault 'OK'
,callback
: function},cancel
: {title
: stringdefault 'Cancel'
,callback
: function}, })
e.g.
this.popup.confirm({
content: 'Are you ready?',
});
this.popup.confirm({
content: 'Are you ready?',
ok: {
callback: () => {
this.popup.alert('Very good!');
},
},
});
this.popup.confirm({
title: 'title',
content: ['come on!', 'go!'],
ok: {
text: 'Y',
style: {
color: 'red'
},
callback: () => {
this.popup.alert('Good!');
},
},
cancel: {
text: 'N',
style: {
color: 'blue'
},
callback: () => {
this.popup.alert('Hurry up!');
},
},
});
###Usage ####Step 1 - install
npm install react-native-popup --save
####Step 2 - import and use in project
import Popup from 'react-native-popup';
class App extends React.Component{
onPressHandle() {
// alert
this.popup.alert(1);
},
render() {
return (
<View style={styles.container}>
<Text style={styles.btn} onPress={this.onPressHandle.bind(this)}>click me !</Text>
{/** Popup component */}
<Popup ref={popup => this.popup = popup }/>
{/** or <Popup ref={popup => this.popup = popup } isOverlay={false} isOverlayClickClose={false}/> */}
</View>
);
},
};