Lottie 文件 animation 選中時播放（世博）

Question

我希望它僅在選擇卡時播放，如果未選擇卡，它只會顯示樂透文件但沒有播放任何內容。 現在我收到一個錯誤， 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>
                                </>
                            )
                        })}
...
)

編輯我還嘗試對autoplay和loop按鈕執行useState ，因此它們會是錯誤的，但是當按下按鈕時它會變為true ，但即使在按下按鈕后 animation 也不會加載。

    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>

這讓我發瘋了，不知道該怎么辦了。

Answer 1

我是 react-native 的新手，但我想這就像反應。 不確定是否正確理解問題。

在這種情況下，您不應該使用animation.current而不是animation作為您的 lottieView 參考嗎？ 或至少確保您的 ref animation已定義（非空），以便即使未啟動容器也可以安裝，這也適用於您的animationPress按 function。 我猜你也應該禁用自動播放（因為你想用一個按鈕觸發autoPlay ）。

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

或者

{animation && < 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();
     }
    }