React Native居中动画图标

Question

React Native居中动画图标

javascriptreactjsreact-nativeanimationexpo

3

我一直在使用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>
    );
  }
}

点击此处查看动画

- André Monteiro

最好使用 Twitter 图标的图像而不是字体，这样您可以精确对齐它。 - Andrew

我已经尝试使用图像并且它可以工作，但是我想使用图标，因为我计划在未来的应用程序中使用其他图标。 - André Monteiro

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shruti garg · Accepted Answer

只需在动画图标的样式中将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>
    );
  }
}