无法将lottie动画和文本置于屏幕中心（react-native）

Question

如何将lottie中的文本和动画集中在一起？我的加载动画有点偏向右侧。我试着跟随这里，但它没有工作https://github.com/airbnb/lottie-react-native/issues/143

我的班级看起来像这样：

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

屏幕看起来像这样。所以你可以看到动画有点偏向右边。也没有高度和宽度= 300，它是非常向右移动。

Answer 1

我解决了这个问题，并在官方Github上发布了我的解决方案：Github issue

Answer 2

我已经使用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>