如何在本機反應的警報中添加 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（這只是一個示例）