Как добавить анимацию Lott ie в Alert в React Native - PullRequest
Новая
       169

Как добавить анимацию Lott ie в Alert в React Native

0 голосов
/ 07 августа 2020

при событии sumit buttoe я вызываю ниже функции, где я открываю одно оповещение и внутреннее оповещение, которое я хочу открыть LottieAnimation, например, когда я сначала нажимаю кнопку, Alet открывается с анимацией до тех пор, пока не придет время ответа, после получения ответ Я изменю анимацию и закрою оповещение, выдается обычное оповещение, но с анимацией ничего не появляется. Пожалуйста помоги. Я зарегистрировал изображение. 

 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);
    }

Я должен так предупредить

1 Ответ

0 голосов
/ 07 августа 2020

Просто используйте 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, когда захотите (это просто пример)

...