[英]Not able to center lottie animation and text in screen (react-native)
How is it possible to center both a text and an animation from lottie?如何将 lottie 的文本和动画居中? My loading animation is a bit cut of to the right side.
我的加载动画有点偏向右侧。 I tried to following here but it didn't work https://github.com/airbnb/lottie-react-native/issues/143
我试图跟随这里,但它没有用https://github.com/airbnb/lottie-react-native/issues/143
My class looks like this:我的课是这样的:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';
import Loading from '../Components/Loading';
var styles = StyleSheet.create({
viewAlignments: {
width: 300,
height: 300,
},
containterAlignments: {
width: 300,
height: 300,
},
});
const LoadingWithMessage = props => {
const { authSuccess } = props;
const text = authSuccess ? 'Success!...'
: 'Checking you against your information...';
return (
<Loading text={text} />
);
};
LoadingWithMessage.propTypes = {
authSuccess: PropTypes.bool.isRequired,
};
const LoadingMessageContainer = connect(state => ({
authSuccess: state.authUi.authSuccess,
}))(LoadingWithMessage);
export default class AuthenticationLoading extends Component {
static navigationOptions = {
header: null,
};
render() {
return (
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
<View style={styles.viewAlignments}>
<LoadingMessageContainer style={styles.containterAlignments} />
</View>
</View>
);
}
};
And the screen looks like this.屏幕看起来像这样。 So you can see that the animation is a bit cut of to the right.
所以你可以看到动画有点向右切。 Also without the height and width = 300 it is very to the right shifted.
同样没有高度和宽度 = 300,它非常向右移动。
I have managed placement using the flexbox way with empty views as reference + optional out commented parts where playing with size if the animation has not a proper size:我使用 flexbox 方式管理放置,空视图作为参考 + 可选的注释部分,如果动画大小不合适,则在其中播放大小:
<View style={{ flex: 1 }>
<View style={{ flex: 2 }}>
<LottieView
style={{ flex: 1 }}
// resizeMode="cover"
// height={400}
// width={600}
/>
</View>
<View style={{ flex: 2 }}>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.