react-native-reanimated 在 android 中的用法
时间: 2024-05-10 14:20:43 浏览: 374
react-native-reanimated 是一个 React Native 库,用于实现高性能、流畅的动画和交互效果。在 Android 中,react-native-reanimated 的使用方式与在 iOS 中基本相同。以下是 react-native-reanimated 在 Android 中的用法:
1. 安装 react-native-reanimated
在项目根目录中运行以下命令:
```
npm install react-native-reanimated
```
或者使用 yarn:
```
yarn add react-native-reanimated
```
2. 连接 react-native-reanimated
在项目根目录中运行以下命令:
```
react-native link react-native-reanimated
```
3. 在代码中使用
在需要使用 react-native-reanimated 的组件或页面中,首先导入库:
```javascript
import Animated from 'react-native-reanimated';
```
然后就可以使用 Animated 中提供的各种动画和交互效果了。例如,以下代码实现了一个在点击时平移的按钮:
```javascript
import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
const App = () => {
const [isPressed, setIsPressed] = useState(false);
const translateX = useSharedValue(0);
const handlePressIn = () => {
setIsPressed(true);
translateX.value = withSpring(-50);
};
const handlePressOut = () => {
setIsPressed(false);
translateX.value = withSpring(0);
};
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ translateX: translateX.value }],
};
});
return (
<View style={styles.container}>
<TouchableOpacity
onPressIn={handlePressIn}
onPressOut={handlePressOut}
activeOpacity={0.8}
>
<Animated.View style={[styles.button, animatedStyle]}>
<Text style={styles.text}>{isPressed ? 'Pressed' : 'Press me'}</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
button: {
width: 120,
height: 40,
borderRadius: 20,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'white',
fontWeight: 'bold',
},
});
export default App;
```
在这个例子中,我们使用了 useSharedValue 创建了一个共享变量 translateX,表示按钮在 x 轴方向的平移量。在 handlePressIn 和 handlePressOut 中,我们分别更新了按钮的状态和 translateX 的值,使用 withSpring 让按钮平滑地过渡到新的位置。最后,我们使用 useAnimatedStyle 创建了一个动画样式 animatedStyle,并将其应用到了按钮的样式中。
以上就是 react-native-reanimated 在 Android 中的基本用法。要了解更多关于 react-native-reanimated 的内容,请参考官方文档。
阅读全文