[英]How to add Lottie animation in Alert in react native
on sumit buttoe event i am calling below fuction,where i am opening one Alert and insid ethe alert I want opne LottieAnimation, like when I click on button first Alet will open with animation till the time response is coming, after getting the response I'll chnage animation ans close the Alert, normal alert is comign but with Animation nothin is coming.在 sumit buttoe 事件上,我在下面调用函数,我在其中打开一个警报和内部警报我想要 opne LottieAnimation,就像当我第一次单击按钮时,Alet 将打开 animation 直到时间响应到来,在得到响应后我'将更改 animation 并关闭警报,正常警报会出现,但 Animation 什么都不会出现。 Please help.
请帮忙。 I have atteched image.
我有atteched图像。
blockSimNumber = async () => {
{this.props.isWalletEnable &&
Alert.alert(
'
<View style={{ height: deviceHeight, width: deviceWidth }}>
<LottieView source={require('../animations/wallet.json')} autoPlay loop />
</View>
<View style={{ height: deviceHeight, width: deviceWidth }}>
<LottieView source={require('../animations/success_tick.json')} autoPlay loop />
</View>
Hang on !',
'We are creating your wallet for you',
[
{
text: 'Close',
onPress: () => console.log('Cancel Pressed'),
style: 'Cancel',
},
]
)
}
// <View style={{ height: deviceHeight, width: deviceWidth }}>
// <LottieView source={require('../animations/wallet.json')} autoPlay loop />
// </View>
await this.props.updatePhysicalResource(this.props.physicalResourceId);
}
Just use a modal
instead of an Alert
Here's how to use a modal:只需使用
modal
而不是Alert
以下是使用模态的方法:
import { View, Modal } from 'react-native';
import LottieView from 'lottie-react-native'
[...]
constructor(props) {
super(props)
this.state = {
IsModalVisible: false
}
}
render(){
return(
<Modal
animationType="fade"
style={{flex: 1}}
transparent={true}
visible={this.state.IsModalVisible}
onRequestClose={() => this.setState({IsModalVisible: false})}
>
<View style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', height: '40%', width: '90%'}}>
<LottieView style={{height: '50%', width: '50%'}} source={require('../animations/success_tick.json')} autoPlay loop />
</View>
</Modal>
)
}
Then just change the IsModalVisible
value to true when you want to (This is just a example)然后在需要时将
IsModalVisible
值更改为 true(这只是一个示例)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.