在页面重新加载之前，React Native ref 是未定义的

Question

我正在使用 refs 为视图设置动画，但 refs 抛出未定义的错误。但是，如果我注释掉访问引用、加载页面、取消注释代码并重新加载页面的尝试，则动画效果很好。

我的代码：

    export const AccountScreen = ({ navigation }) => {
        
          return (
            <SafeAreaView style={{ backgroundColor:'#FFFFFF', flex: 1 }}>
              <Animatable.View style={styles.container} ref={ref => {this.containerRef = ref}}>
              </Animatable.View>
            </SafeAreaView>
          )
      };

   launchOpenAnimation()
   function launchOpenAnimation () {
     this.containerRef.animate(appearContainerAnimation); //If I comment this out, reload, and un-comment, it works
   }

我该怎么做才能解决这个问题？似乎在执行我的 launchOpenAnimation() 时没有定义 ref，但它是在执行之后定义的，因此如果我将其注释掉、重新加载、取消注释并重新加载，代码就会工作.

Answer 1

首先，您的问题在调用组件和功能组件之间搞砸了，因为功能组件中没有 this。我将使用 useRef 和 useEffect

将它们转换为函数组件

第一个运行this.containerRef还没有赋值给Animatable的ref。

试试这个

export const AccountScreen = ({ navigation }) => { 
  const animateRef = useRef()
  useEffect(() =>{
     launchOpenAnimation()
     function launchOpenAnimation () {
       // add ? to make sure animate is called only when this.containerRef exists
     containerRef?.current.animate(appearContainerAnimation);
}    
  },[])
      
  return (
    <SafeAreaView style={{ backgroundColor:'#FFFFFF', flex: 1 }}>
      <Animatable.View style={styles.container} ref={ref => {
            ref.animate(appearContainerAnimation); // add this if you need to run when initial render run
            animateRef.current = ref
            }}>
      </Animatable.View>
    </SafeAreaView>
  )
};

在页面重新加载之前，React Native ref 是未定义的

React Native ref is undefined until page reload

react-native

react-native-animatable