Блог

Я хочу, чтобы он воспроизводился только при выборе карты, если карта не выбрана, она просто отображает файл lottie, но ничего не воспроизводится. Прямо сейчас я получаю сообщение об ошибке cannot read property 'play' of null . Когда я удаляю animationPress() и получаю файл для запуска, он также запускается с упомянутого initialSegment , что я передаю в него.

Что я здесь делаю не так?

Моя карточка, в которой находится файл Lottie:

    const animation = useRef(null);

    const animationPress = () => {
        animation.current.play();
    }

return(
{filteredData.map((item, index) => {
                            return (
                                <>
                                    <TouchableOpacity onPress={() => setSelected(item), animationPress()}>
                                        <View style={[{ alignItems: 'center' }, selected.id == item.id ? { paddingTop: 10 } : { paddingTop: 20 }]}>
                                            <CardioCard style={selected.id == item.id ? { backgroundColor: 'green', fontFamily: 'ssb_SemiBold' } : {}} >
                                                <CardItem style={[styles.card, selected.id == item.id ? { backgroundColor: 'green' } : {}]}>
                                                    <Text>

                                                        < LottieView
                                                            ref={animation}
                                                            source={require('../../assets/images/heartbeat.json')}
                                                            initialSegment={68,135}
                                                            autoPlay={true}
                                                            loop={true}
                                                            style={{ width: 100, height: 100 }} />
                                              
                                                    </Text>
                                                </CardItem>
                                            </CardioCard>
                                            <Text style={[{ fontSize: 18, color: 'hsl(98, 0%, 11%)', paddingLeft: 15 }, selected.id == item.id ? { fontFamily: 'ssb_SemiBold' } : {}]}>{item.name}</Text>
                                        </View>
                                    </TouchableOpacity>
                                </>
                            )
                        })}
...
)
 

Редактировать
Я также пытался сделать useState для кнопки autoplay and loop , чтобы они были ложными, но при нажатии кнопки она включалась true , но анимация не загружалась даже после нажатия кнопки.

     const [playAnimation, setPlayAnimation] = useState(false);

<TouchableOpacity onPress={() => setPlayAnimation(true)}>

    <LottieView
        source={require('../../assets/images/heartbeat.json')}
        autoPlay={playAnimation}
        loop={playAnimation}
        style={{ width: 100, height: 100 }}
    /> 
</TouchableOpacity>

 

это сводит меня с ума, и я не знаю, что делать дальше.

Я новичок в react-native, но, думаю, это похоже на react. Не уверен, что правильно понял проблему.

В этом случае не следует ли использовать animation.current вместо animation в качестве ссылки на lottieView? или, по крайней мере, убедитесь, что ваша ссылка animation определена (не null), чтобы контейнер можно было смонтировать, даже если он не запущен, это также для вашей animationPress функции. Также вам следует отключить autoPlay I guess (поскольку вы хотите запустить анимацию с помощью кнопки).

 < LottieView
         ref={animation.current}
         source={require('../../assets/images/heartbeat.json')}
         initialSegment={68,135}
         autoPlay={false}
         loop={true}
         style={{ width: 100, height: 100 }} />
 

или

 {animation amp;amp; < LottieView
         ref={animation}
         source={require('../../assets/images/heartbeat.json')}
         initialSegment={68,135}
         autoPlay={false}
         loop={true}
         style={{ width: 100, height: 100 }} />}
 

И, конечно

    const animationPress = () => {
     if(animation?.current) {
        animation.current.play();
     }
    }