react-native-root-toast是一个挺不错的提示组件，大概用法如下：
持续时间
Toast.durations.SHORT (equals to 2000)
Toast.durations.LONG (equals to 3500)
提示位置
Toast.positions.TOP (equals to 20)
Toast.positions.BOTTOM (equals to -20)
Toast.positions.CENTER (equals to 0)
具体属性
WX20170527-112842.png
用法一：
import Toast from 'react-native-root-toast';
// Add a Toast on screen.
let toast = Toast.show('This is a message', {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
shadow: true,
animation: true,
hideOnPress: true,
delay: 0,
onShow: () => {
// calls on toast\`s appear animation start
},
onShown: () => {
// calls on toast\`s appear animation end.
},
onHide: () => {
// calls on toast\`s hide animation start.
},
onHidden: () => {
// calls on toast\`s hide animation end.
}
});
// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function () {
Toast.hide(toast);
}, 500);
用法二：
import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';
class Example extends Component{
constructor() {
super(...arguments);
this.state = {
visible: false
};
}
componentDidMount() {
setTimeout(() => this.setState({
visible: true
}), 2000); // show toast after 2s
setTimeout(() => this.setState({
visible: false
}), 5000); // hide toast after 5s
};
render() {
return <Toast
visible={this.state.visible}
position={50}
shadow={false}
animation={false}
hideOnPress={true}
>This is a message</Toast>;
}
}
