[英]React Native center Animated Icon
I've been using expo to develop some cool programs and I'm trying to build a clone of Twitter. 我一直在使用expo开发一些很酷的程序,并且正在尝试构建Twitter的克隆。 I got a little problem while building the loading animation of twitter app.
在构建Twitter应用程序的加载动画时遇到了一个小问题。 I'm using IonIcons "twitter-logo" to build this and the problem is that the Icon doesn't stay centered like in the original app, it gets animated weirdly.
我正在使用IonIcons的“ twitter-logo”来构建它,问题是Icon不会像原始应用程序那样居中放置,它会变得异常奇怪。
To test it, just paste the code bellow to your App.js and you'll see the animation. 要对其进行测试,只需将下面的代码粘贴到您的App.js中,您将看到动画。
If you don't have Expo, just change the import to react-native-vecto-icons. 如果您没有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>
);
}
}
Just change alignSelf property in style of Animated Icon to textAlign. 只需将Animated Icon样式中的alignSelf属性更改为textAlign。 That will make Icon in center of screen.Below is updated code.
这将使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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.