React Native支援View、Text、Image、ScrollView、FlatList、SectionList等標籤設定動畫，其他元件也可使用Animated.createAnimatedComponent()設定。

我這次要使用的淡入動畫需要用到Animated View，所以要先新增一個fadeAnim.js檔後載入animated API：

import {Animated } from 'react-native';

之後要設定動畫的初始值：

const fadeAnim = new Animated.Value(0); 

可是這樣設定會有個問題就是每次畫面重新渲染的時候，動畫變數fadeAnim都會歸零，這時就需要參考變數useRef了。

參考變數useRef

React Native其實提供了兩種方法儲存變數

• 狀態變數useState：只要App沒有完全關閉，useState記錄的狀態就不會消失，且狀態變數一旦改變會啟動重新渲染
• 參考變數useRef：只要App沒有完全關閉，useRef記錄的參考變數就不會消失(類似於全域變數的效果)

useRef是React Native提供的Hook，用來記錄App的變數，使用時要先將useRef匯入。

import React, {useEffect} from "react";

然後將fadeAnim改成用useRef宣告，參考變數在使用時，要在後面加入.current：

const fadeAnim = useRef(new Animated.Value(0)).current; 

接下來在useEffect內利用Animated.timing函式設定變數fadeAnim用十秒從0變成1
(toValue為要變成的值、duration為要花的時間(毫秒))

useEffect(() => {
  Animated.timing(fadeAnim, {
     toValue: 1,
     duration: 1000,
  }).start();
}, []);

最後利用<Animated.View>宣告一個自訂標籤，之後就可以在其他畫面檔案裡使用此自訂標籤了。

import React, {useRef,useEffect} from "react";
import {Animated } from 'react-native';
const FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current; 
    // const fadeAnim = new Animated.Value(0); 
    useEffect(() => {
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 1000,
      }).start();
    }, []);
  
    return (
      <Animated.View
        style={{
          ...props.style,
          opacity: fadeAnim,
        }}
      >
        {props.children}
      </Animated.View>
    );
  };

  export default FadeInView;

自訂動畫標籤用法：

import FadeInView from "../animation/fadeAnim"

const HomeScreen = ({ navigation }) => {
  return (
      <FadeInView>
          <Text>這裡是首頁</Text>
      </FadeInView>
  );
}