react-native - 错误：渲染的钩子比上一次渲染时更多。使用 captureRef 时

Question

我正在尝试拍摄我的滚动视图，以便稍后分享。为此，我使用https://github.com/gre/react-native-view-shot#capturerefview-options-lower-level-imperative-api

我从来没有在 react-native 中使用过 refs，所以我对它的用法有点困惑，我在阅读文档后尝试这样做，但我仍然不清楚如何使用它：

    async function handleShareButton() {
        const result = await captureRef(scrollRef, {
            format: "jpg",
            quality: 0.8
        }).then(
            uri => console.log("Image saved to", uri),
            error => console.error("Oops, snapshot failed", error)
        );
    }

export default function IncidentDetails() {
    const route = useRoute();
    const [flood, setFlood] = useState<Flood>();
    let [selectedImage, setSelectedImage] = useState<any>();
    const params = route.params as IncidentDetailsRouteParams;

    useEffect(() => {
        api.get(`floods/${params.id}`).then(response => {
            setFlood(response.data);
        });
    }, [params.id]);


function handleOpenGoogleMapsRoutes() {
        Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${flood?.latitude},${flood?.longitude}`);
    }



const scrollRef = useRef();
     return (
        <ScrollView style={styles.container} ref={scrollRef}>
            <View style={styles.imagesContainer}>
                <ScrollView horizontal pagingEnabled>
                    {flood?.images.map(image => {
                        return (
                            <React.Fragment key={image.path}>
                                <Image
                                    style={styles.image}
                                    source={{
                                        uri: image.path
                                    }}/>
                            </React.Fragment>

                        )
                    })}

                </ScrollView>
                <TouchableOpacity
                    onPress={() => handleShareButton()}
                    style={styles.shareButton}>
                    <Feather name="share-2" size={20} color="white"/>
                </TouchableOpacity>
            </View>


            <View style={styles.detailsContainer}>

                <Text style={styles.title}>{flood?.type}</Text>
                <Text style={styles.description}>Originada de {flood?.source}</Text>
                <View style={styles.mapContainer}>
                    <MapView
                        initialRegion={{
                            latitude: flood?.latitude,
                            longitude: flood?.longitude,
                            latitudeDelta: 0.008,
                            longitudeDelta: 0.008,
                        }}
                        zoomEnabled={true}
                        pitchEnabled={false}
                        scrollEnabled={false}
                        rotateEnabled={false}
                        style={styles.mapStyle}
                    >
                        <Circle center={{
                            latitude: flood?.latitude,
                            longitude: flood?.longitude,
                        }}
                                radius={flood?.range}
                                fillColor={'rgba(53, 159, 181,0.4)'}
                        />
                        <Marker
                            icon={mapMarker}
                            coordinate={{
                                latitude: flood?.latitude,
                                longitude: flood?.longitude,
                            }}
                        />
                    </MapView>
                </View>
                <TouchableOpacity onPress={() => handleOpenGoogleMapsRoutes} style={styles.routesContainer}>
                    <Text style={styles.routesText}>Ver rotas no Google Maps</Text>
                </TouchableOpacity>

                <View style={styles.separator}/>
                <Text style={styles.title}>Detalhes</Text>
                <Text style={styles.description}>{flood?.description}</Text>
            </View>

            <View style={styles.scheduleContainer}>
                <Text style={styles.titleDate}>Horário Reportado:</Text>

                <View style={[styles.scheduleItem, styles.scheduleItemBlue]}>
                    <Feather name="clock" size={30} color="#2AB5D1"/>
                    <Text style={[styles.scheduleText, styles.scheduleTextBlue]}>{flood?.startDate} </Text>
                </View>
                <Text style={styles.titleDate}>Nível da água</Text>

                <View style={[styles.scheduleItem, styles.scheduleItemYellow]}>
                    <Feather name="alert-triangle" size={30} color="#e6cc07"/>
                    <Text style={[styles.scheduleText, styles.scheduleTextYellow]}>{flood?.waterLevel}</Text>
                </View>
                <Text style={styles.titleDate}>Riscos: </Text>
                {/*
                    Map responsável por listar os riscos
                */}
                {flood?.hazards.map(hazard => {
                    if (hazard.status) {
                        return (
                            <View style={[styles.scheduleItem, styles.scheduleItemRed]} key={hazard.type}>
                                <Feather name="alert-triangle" size={30} color="#FF669D"/>
                                <Text style={[styles.scheduleText, styles.scheduleTextRed]}>{hazard.type}</Text>
                            </View>
                        )
                    }

                })}

            </View>
        </ScrollView>
    )
}

我目前收到此错误： Error: Rendered more hooks than during the previous render.