动画后，我的文本组件挤入了Animated.View内部。例如，如果我有4行文本，而其中只有2行仅显示在屏幕上。而且我做了很多操作，例如将flex = 1，maxHeight放给了父级，却没有任何效果。我发现的最好方法是更改​​AnimatedView的minHeight。但是我认为实现依赖于文本长度的动态高度并不是一个好主意。你能推荐我一个好方法吗？

const vars = {
  duration: 500,offset: 56,};

export class Notification extends React.Component<NotificationProps> {
  public state = {
    offset: new Animated.Value(-vars.offset),opacity: new Animated.Value(0),};

  private _timeout: any;

  public componentDidmount() {
    const timeout = -moment().diff(this.props.closeTime);
    this._timeout = setTimeout(this._close,timeout);

    Animated.parallel([
      Animated.timing(this.state.offset,{
        toValue: 8,duration: vars.duration,}),Animated.timing(this.state.opacity,{
        toValue: 1,]).start();
  }

  public componentWillUnmount() {
    clearTimeout(this._timeout);
  }

  public componentDidUpdate(prevProps: NotificationProps,prevState: any) {
    const { itemIndex } = this.props;
    const timeout = -moment().diff(this.props.closeTime);
    clearTimeout(this._timeout);

    if (itemIndex && itemIndex >= 2) {
      this._close(true);

      return;
    }

    this._timeout = setTimeout(this._close,timeout);
  }

  public render() {
    const { type,title,message,itemIndex = 0 } = this.props;
    const containerStyle = type ? (SS as any)['notificationType' + type.capitalize()] : null;
    const animatedStyle = {
      marginTop: this.state.offset,opacity: this.state.opacity,zIndex: 10 - itemIndex,};

    return (
      <Animated.View style={animatedStyle}>
        <TouchableOpacity style={[SS.notification,containerStyle]} activeOpacity={1} onPress={this._onPress}>
          <Row flex={1}>
            <Row flex={1}>
              <Row alignSelf={'center'} flex={1}>
                {!!title && <Text textStyle={'textLine'} color={colors.base}>{title}</Text>}
                <Text numberOfLines={3} textStyle={'textLine'} color={colors.base} wrap>{message}</Text>
              </Row>
            </Row>
            <ButtonIcon name={'IconClosePopup'} color={colors.base} fontSize={10} onPress={this._onPress} />
          </Row>
        </TouchableOpacity>
      </Animated.View>
    );
  }

  private _onPress = () => {
    this._close(false);
  };

  private _close = (isThird: boolean = false) => {
    Animated.parallel([
      Animated.timing(this.state.offset,{
        toValue: isThird ? vars.offset : -vars.offset,{
        toValue: 0,]).start(() => this.props.onPress());
  };
}

const SS = EStyleSheet.create({
  notification: {
    flexDirection: 'row',alignItems: 'center',backgroundColor: colors.base,justifyContent: 'space-between',borderRadius: 8,paddingHorizontal: 12,paddingTop: 21,paddingBottom: 19,marginHorizontal: 12,minHeight: vars.offset,},notificationTypeAlert: { backgroundColor: colors.negativeLight },notificationTypeSuccess: { backgroundColor: colors.positiveLight },notificationTypeInfo: { backgroundColor: colors.negativeLight },});