javascript - React Native 中心动画图标

Question

我一直在使用 expo 开发一些很酷的程序，并且我正在尝试构建 Twitter 的克隆。我在构建 Twitter 应用程序的加载动画时遇到了一个小问题。我正在使用 IonIcons“twitter-logo”来构建它，问题是图标不像在原始应用程序中那样保持居中，它会奇怪地动画化。

要测试它，只需将下面的代码粘贴到您的 App.js 中，您就会看到动画。

如果您没有 Expo，只需将导入更改为 react-native-vecto-icons。

import React from "react";
import { Animated, Easing, Text, View } from "react-native";
import Icon from "@expo/vector-icons/Ionicons";

AnimatedIcon = Animated.createAnimatedComponent(Icon);

export default class RootComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      isAnimating: false,
      iconSize: new Animated.Value(60)
    };
  }

  startAnimation = () => {
    Animated.timing(this.state.iconSize, {
      toValue: 1500,
      duration: 1000,
      easing: Easing.back(0.8)
    }).start(() => this.setState({ isAnimating: false }));
  };

  componentDidMount() {
    let x = setTimeout(() => {
      let isLoading = !this.state.isLoading;
      let isAnimating = !this.state.isAnimating;
      this.setState({ isLoading, isAnimating });
      this.startAnimation();
      clearTimeout(x);
    }, 2000);
  }

  render() {
    if (this.state.isLoading || this.state.isAnimating)
      return (
        <Animated.View
          style={{
            flex: 1,
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#1b95e0"
          }}
        >
          <AnimatedIcon
            name={"logo-twitter"}
            style={{
              alignSelf: "center",
              fontSize: this.state.iconSize
            }}
            color={"#fff"}
          />
        </Animated.View>
      );

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>TWITTER APP :)</Text>
      </View>
    );
  }
}

CLICK HERE TO SEE THE ANIMATION

Answer 1

只需将 Animated Icon 样式中的 alignSelf 属性更改为 textAlign 即可。这将使图标位于屏幕中央。下面是更新的代码。

import React from 'react';
import { Animated, Easing, Text, View } from 'react-native';
import { Ionicons as Icon } from '@expo/vector-icons';

const AnimatedIcon = Animated.createAnimatedComponent(Icon);

export default class RootComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      isAnimating: false,
      iconSize: new Animated.Value(60),
    };
  }

  startAnimation = () => {
    Animated.timing(this.state.iconSize, {
      toValue: 1500,
      duration: 1000,
      easing: Easing.back(0.8),
    }).start(() => this.setState({ isAnimating: false }));
  };

  componentDidMount() {
    let x = setTimeout(() => {
      let isLoading = !this.state.isLoading;
      let isAnimating = !this.state.isAnimating;
      this.setState({ isLoading, isAnimating });
      this.startAnimation();
      clearTimeout(x);
    }, 2000);
  }

  render() {
    if (this.state.isLoading || this.state.isAnimating)
      return (
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#1b95e0',
          }}>
          <AnimatedIcon
            name={'logo-twitter'}
            style={{
              textAlign: 'center',
              fontSize: this.state.iconSize,
            }}
            color={'#fff'}
          />
        </View>
      );

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>TWITTER APP :)</Text>
      </View>
    );
  }
}