反應本地中心動畫圖標

Question

我一直在使用expo開發一些很酷的程序，並且正在嘗試構建Twitter的克隆。 在構建Twitter應用程序的加載動畫時遇到了一個小問題。 我正在使用IonIcons的“ twitter-logo”來構建它，問題是Icon不會像原始應用程序那樣居中放置，它會變得異常奇怪。

要對其進行測試，只需將下面的代碼粘貼到您的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>
    );
  }
}

單擊此處查看動畫

Answer 1

只需將Animated Icon樣式中的alignSelf屬性更改為textAlign。 這將使Icon出現在屏幕中央。下面是更新的代碼。

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>
    );
  }
}