4

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

在此处输入图像描述

4

1 回答 1

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>
于 2020-12-15T18:52:15.760 回答