React Native 将变量传递给嵌套组件

Question

我有一个相机和缩放组件，它们是分开的，因为改变相机中的状态会导致它不断重新加载。我遇到的问题是我无法弄清楚如何将缩放变量传递给相机组件，以便它可以影响缩放。

这里是相机渲染组件（cameracontainer是expo相机的一个实例）：

return (
        <PinchGesture>
            <CameraBackground>
                <SnapButtonContainer onPress={snap}>
                    <SnapButton  />
                </SnapButtonContainer>
                <CameraContainer
                    ref={(camera) => (cameraRef.current = camera)}
                    type={Camera.Constants.Type.back}
                    //zoom={zoom} < this is where I need to put the variable
                />
            </CameraBackground>
        </PinchGesture>
    );

他是包裹相机的PinchGesture组件：

import React, { useState } from "react";
import { Animated, View } from "react-native";
import { PinchGestureHandler, State } from "react-native-gesture-handler";

export const PinchGesture = (props) => {

    const [zoom, setZoom] = useState(0);
    const [scale, setScale] = useState(0);
    
    const onPinchHandlerStateChange = (event) => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            if (event.nativeEvent.scale > scale && zoom <= 1) {
                setZoom(zoom + 0.1);
            } else if (event.nativeEvent.scale < scale && zoom >= 0) {
                setZoom(zoom - 0.1);
            }
            setScale(event.nativeEvent.scale);
        }
        
        console.log('zoom:', zoom);
    };

    return (
        <PinchGestureHandler
                //onGestureEvent={onPinchEvent}
                onHandlerStateChange={onPinchHandlerStateChange}
                zoom={zoom} < this was an attempt to pass the variable
            >
            {props.children}
        </PinchGestureHandler>
    );
}

我尝试了许多不同的方法来让它工作，最后一种是使用上下文，但是由于某种原因，捏合手势不会注册手势。希望有人知道我如何将这些数据获取到嵌套组件

Answer 1

我建议在您使用 PinchGesture 和 CameraContainer 的组件中设置缩放状态，这样您就可以将函数 onUpdateZoom 作为 PinchGesture 中的道具传递，并在更改缩放时从 PinchGesture 调用此道具函数以更新父组件中的状态并传递缩放CameraContainer 中的状态。

const [zoom, setZoom] = useState(0);

return (
    <PinchGesture
       zoom={zoom}
       onUpdateZoom={(value) => setZoom(value)}
    >
        <CameraBackground>
            <SnapButtonContainer onPress={snap}>
                <SnapButton  />
            </SnapButtonContainer>
            <CameraContainer
                ref={(camera) => (cameraRef.current = camera)}
                type={Camera.Constants.Type.back}
                zoom={zoom}
            />
        </CameraBackground>
    </PinchGesture>
);

PinchGesture 组件下方

import React, { useState } from "react";
import { Animated, View } from "react-native";
import { PinchGestureHandler, State } from "react-native-gesture-handler";

export const PinchGesture = (props) => {
    const [scale, setScale] = useState(0);

    const { zoom, onUpdateZoom } = props;
    
    const onPinchHandlerStateChange = (event) => {
        if (event.nativeEvent.oldState === State.ACTIVE) {
            if (event.nativeEvent.scale > scale && zoom <= 1) {
                onUpdateZoom(zoom + 0.1);
            } else if (event.nativeEvent.scale < scale && zoom >= 0) {
                onUpdateZoom(zoom - 0.1);
            }
            setScale(event.nativeEvent.scale);
        }
        
        console.log('zoom:', zoom);
    };

    return (
        <PinchGestureHandler
                //onGestureEvent={onPinchEvent}
                onHandlerStateChange={onPinchHandlerStateChange}
                zoom={zoom} < this was an attempt to pass the variable
            >
            {props.children}
        </PinchGestureHandler>
    );
}