React Native 是一個流行的跨平臺移動應用程序開發框架。隨著其日益普及，開發人員開始探索如何為其添加動畫效果。在這種情況下，CSS 動畫是一個非常流行的選擇。那么，如何在 React Native 中引入 CSS 動畫呢？

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Animated, Text} from 'react-native';
class App extends Component {
state = {
animation: new Animated.Value(0),
};
startAnimation = () =>{
Animated.timing(this.state.animation, {
toValue: 1,
duration: 1000,
useNativeDriver: false,
}).start();
};
render() {
const animatedStyle = {
transform: [{scale: this.state.animation}],
};
return (
<TouchableOpacity
style={styles.button}
onPress={this.startAnimation}
>
<Animated.View style={[styles.box, animatedStyle]}>
<Text style={styles.text}>Hello, world!</Text>
</Animated.View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
button: {
alignSelf: 'center',
marginTop: 16,
},
box: {
width: 100,
height: 100,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'white',
},
});
export default App;

如上所示，我們首先導入所需的 React Native 組件，然后創建了一個 App 組件，并添加了一個名為 animation 的狀態。我們使用此狀態來控制縮放動畫。

<TouchableOpacity> 元素提供了一個按鈕，當用戶點擊該按鈕時，調用 startAnimation() 方法。在 startAnimation() 方法中，我們使用 Animated.timing() 方法來創建一個動畫。我們通過 toValue 屬性指定動畫的目標值，使用 duration 屬性來設置動畫持續時間（以毫秒為單位），并將 useNativeDriver 屬性設置為 false 表示使用 JavaScript 動畫。

在渲染時，我們使用一個名為 animatedStyle 的變量，它將當前動畫值應用于我們的組件。我們將組件傳遞給 <Animated.View> 元素，并將 CSS 樣式應用于該元素。在這種情況下，我們使用 transform 屬性來縮放組件，因為我們希望實現的是縮放動畫。

最后，我們將我們的組件包裝在 <TouchableOpacity> 元素中，這樣當用戶點擊該組件時，將觸發動畫。

如此簡單，我們已經成功實現了一個基本的 CSS 動畫效果！