无法在屏幕中居中 lottie 动画和文本（react-native）答案

【问题标题】：Not able to center lottie animation and text in screen (react-native)无法在屏幕中居中 lottie 动画和文本（react-native）
【发布时间】：2018-06-12 17:21:36
【问题描述】：

如何将来自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，它非常向右移动。

【问题讨论】：

我遇到了类似的问题（但我从未提交过问题）。这是关于尺寸值加倍（我会说你的viewAlignments 导致了这个问题）。我通过在动画周围添加边框、删除所有样式然后找出正确的位置来调试它。即使，当 iOS 正确居中时，Android 还是有一些问题。如果我明天（在工作中）发现我们如何解决它，我可以写一个答案。同时我只是建议删除所有样式值，然后尝试justifyContent: center、alignItems: center、alignSelf: center 和所有其他黑魔法。
那太棒了@zvona

标签： javascript ios css react-native lottie

【解决方案1】：

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

【讨论】：