Open glacjay opened 6 years ago
遇到相同的问题,请问解决了吗?
react-native-root-toast is in the same UIViewController or Activity, and react-native-modal create a new UIViewController or PopupWindow, so react-native-modal must be on the react-native-root-toast, to solve this, support you to use react-native-top-modal
Here is my testing code:
import React from 'react';
import {
Button,
Text,
View
} from 'react-native';
import Modal from 'react-native-modal'
import Toast from 'react-native-root-toast'
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
modalVisible: false,
toastVisible: false,
topToastVisible: false,
middleToastVisible: false,
bottomToastVisible: false,
}
}
render() {
return (
<View style={{borderWidth: 5, borderColor: 'red'}}>
<Text>Welcome to React Native!</Text>
<Button title="show modal" onPress={() => {
this.setState({modalVisible: true})
}} />
<Button title="show toast" onPress={() => {
Toast.show('toast', {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
backgroundColor: 'red',
})
this.setState({toastVisible: true})
setTimeout(() => this.setState({toastVisible: false}), Toast.durations.LONG)
}} />
<Toast
visible={this.state.toastVisible}
position={-20}
animation={true}
>
modal toast
</Toast>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.setState({modalVisible: false})}
style={{
height: 300,
justifyContent: 'flex-end',
margin: 0,
borderWidth: 2,
borderColor: 'blue',
}}>
<View style={{height: 200, backgroundColor: '#eee'}}>
<Button title="show toast directly" onPress={() => {
Toast.show('modal toast', {
duration: Toast.durations.LONG,
backgroundColor: 'red',
})
}} />
<Button title="show toast at top" onPress={() => {
this.setState({topToastVisible: true})
setTimeout(() => this.setState({topToastVisible: false}), Toast.durations.LONG)
}} />
<Toast
visible={this.state.topToastVisible}
position={40}
animation={true}
>
top toast
</Toast>
<Button title="show toast at middle" onPress={() => {
this.setState({middleToastVisible: true})
setTimeout(() => this.setState({middleToastVisible: false}), Toast.durations.LONG)
}} />
<Toast
visible={this.state.middleToastVisible}
position={0}
animation={true}
>
middle toast
</Toast>
<Button title="show toast at bottom" onPress={() => {
this.setState({bottomToastVisible: true})
setTimeout(() => this.setState({bottomToastVisible: false}), Toast.durations.LONG)
}} />
<Toast
visible={this.state.bottomToastVisible}
position={-40}
animation={true}
>
bottom toast
</Toast>
</View>
</Modal>
</View>
);
}
}
You can try to open the modal and see that, the toast at top and middle can show up, while the toast at bottom can't show.
react-native-dialog-component may a good try
<Modal
isVisible={this.state.showAlertModal}
style={{margin:0, flex:1, flexDirection:'row'}}
useNativeDriver
>
{
this.state.showAlertModal &&
<ToastContainer
visible={toastText.length > 0}
position={Toast.positions.CENTER}
shadow={true}
animation={true}
hideOnPress={true}
onHide={()=>this.setState({toastText:''})}
>{toastText}</ToastContainer>
}
</Modal>
positive and zero position is working as expected