时间戳

首页 > 解决方案 > React Native 动画的问题

react-native - React Native 动画的问题

问题描述

正如您在此处的视频https://www.youtube.com/watch?v=hhBGUp9_GAY&feature=youtu.be中看到的那样，我在动画完成后将文本居中时遇到了问题。无论屏幕宽度如何，我都希望在所有设备上都完美地水平居中。我正在使用动画 API。有什么建议么？

这是我的方法

import React, { useEffect } from "react";
import { View, StyleSheet, Animated, Text, Dimensions, AsyncStorage } from "react-native";

export default function Welcome({ navigation }) {
  const width = Dimensions.get('screen').width

  let position1 = new Animated.ValueXY(0, 0);
  let position2 = new Animated.ValueXY(0, 0);
  useEffect(() => {
    Animated.timing(position1, {
      toValue: { x: width / 4.5, y: 0 },
      duration: 900
    }).start();
    Animated.timing(position2, {
      toValue: { x: -width / 3, y: 0 },
      duration: 900
    }).start();
  }, []);

  _retrieveData = async () => {
    try {
      const token = await AsyncStorage.getItem('tokehhn');
      if (token !== null) {
        // We have data!!
        setTimeout(() => navigation.navigate('Home'), 2000)
      } else {
        setTimeout(() => navigation.navigate('Auth'), 2000)
      }
    } catch (error) {
      // Error retrieving data
    }
  };

  useEffect(() => {
    _retrieveData()
  }, [])

  return (
    <View style={styles.container}>
      <Animated.View style={position1.getLayout()}>
        {/* <View style={styles.ball} /> */}
        <Text style={{ position: 'relative', fontWeight: 'bold', fontSize: 24, color: '#5790f9' }}>Welcome to Glue</Text>
      </Animated.View>
      <Animated.View style={position2.getLayout()}>
        {/* <View style={styles.ball} /> */}
        <Text style={{ position: 'relative', right: -220, fontWeight: 'bold', fontSize: 21, color: '#5790f9' }}>Where everything happens</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
});

标签： react-nativeanimationcss-animationsstylingreact-animations

解决方案

使它成为一个简单而干净的插值。

如果我们使用0-1范围内的Animated.Value，代码看起来总是干净且可读。

完整代码：

    import React, {useEffect} from 'react';
    import {View, StyleSheet, Animated} from 'react-native';

    const App = () => {
      const animate = new Animated.Value(0);
      const inputRange = [0, 1];
      const translate1 = animate.interpolate({inputRange, outputRange: [-100, 0]});
      const translate2 = animate.interpolate({inputRange, outputRange: [100, 0]});
      useEffect(() => {
        Animated.timing(animate, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }).start();
      }, []);
      return (
        <View style={styles.container}>
          <Animated.Text
            style={[styles.text, {transform: [{translateX: translate1}]}]}>
            First Text
          </Animated.Text>
          <Animated.Text
            style={[styles.text, {transform: [{translateX: translate2}]}]}>
            Second Text
          </Animated.Text>
        </View>
      );
    };

    export default App;

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
      text: {
        fontSize: 25,
      },
    });

使用该动画值，如果需要，实现任何其他动画。

例如，如果您需要在移动时缩放文本：

const scale = animate.interpolate({inputRange, outputRange: [1, 1.5]});

推荐阅读