Реагируй Родной центр Анимированная Иконка

Question

Я использую expo для разработки некоторых крутых программ и пытаюсь создать клон Twitter.У меня возникла небольшая проблема при создании анимации загрузки приложения Twitter.Я использую IonIcons «twitter-logo» для создания этого, и проблема в том, что Icon не остается в центре, как в оригинальном приложении, он странно анимируется.

Чтобы проверить это, простоВставьте приведенный ниже код в ваш App.js, и вы увидите анимацию.

Если у вас нет Expo, просто измените импорт на Reaction-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

Просто измените свойство alignSelf в стиле Animated Icon на 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>
    );
  }
}