如何在本机反应的警报中添加 Lottie animation

Question

在 sumit buttoe 事件上，我在下面调用函数，我在其中打开一个警报和内部警报我想要 opne LottieAnimation，就像当我第一次单击按钮时，Alet 将打开 animation 直到时间响应到来，在得到响应后我'将更改 animation 并关闭警报，正常警报会出现，但 Animation 什么都不会出现。 请帮忙。 我有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);
    }

Answer 1

只需使用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>

    )
}

然后在需要时将IsModalVisible值更改为 true（这只是一个示例）