Question

我对setNativeProps对于功能组件的确切工作方式感到困惑。我的代码适用于类组件，但我想将其全部更改为功能组件

所以我有我的功能组件：

export default function Item(props) {

其中有一个名为onMoveX的函数

    function onMoveX(dx) {
        refs['task'].setNativeProps({ style: { transform: [{ translateX: dx }] } });
    }

还有我的回报。

return (
        <View>
            
           <Animated.View ref='task' style={styles.item} {...panResponder.panHandlers}>
                <Text style={[styles.text, { flex: 1 }]}> {props.item.text} </Text>
            </Animated.View>

        </View>
    );

但是，我得到的功能组件不能具有ref错误，并且我对如何解决此问题感到困惑。我已经尝试过useState，但是根据许多人的说法，它比setNativeProps效率低。

Answer 1

在功能组件中，您可以通过以下方式使用'useRef'：

const taskRef = React.useRef();

function onMoveX(dx) {
    taskRef.current.setNativeProps({ style: { transform: [{ translateX: dx }] } });
}

return (
    <View>
        
       <Animated.View ref={taskRef} style={styles.item} {...panResponder.panHandlers}>
            <Text style={[styles.text, { flex: 1 }]}> {props.item.text} </Text>
        </Animated.View>

    </View>
);

如何在功能组件中使用setNativeProps？反应本机

1 个答案: