Reactjs 在React Native中创建两个图像之间的淡入淡出时，图像会闪烁

我正在尝试创建一个能够在两个图像之间创建淡入淡出的

组件。第一次渲染时，图像应该从透明变为完全不透明度；在后续渲染中，应保留上一个图像并将其用作淡入淡出的起点，以便您可以看到新图像在上一个图像的顶部淡入淡出

所以我的逻辑是：

• 在

  componentWillReceiveProps

  上，我将当前道具保存到

  this.state.previousBackground

  中，以免它们丢失
• 在渲染时，我检查是否存在以前的背景。如果没有（第一次渲染），我只渲染新的背景。如果有，我首先渲染上一个背景（完全不透明度），然后渲染新背景，将其不透明度从

  0

  设置为

  1

它做了它应该做的，但是图像在每次转换时都会闪烁。这就像我可以看到新的背景在完全不透明的一瞬间消失，并开始褪色

如果有人知道这可能是什么原因，我们将不胜感激。我正在为我的组件附加代码，如果有任何不清楚的地方，请告诉我

我用的是RN0.21

非常感谢

编辑：我也尝试过不使用

position:absolute

，而是使用

translateY

将以前的背景相对定位，并将新背景移到它上面。结果是一样的

'use strict';

// --------------------------------------------------------------
// React components
// --------------------------------------------------------------

var React = require('react-native');
var {
  Animated,
  Dimensions,
  Image,
  StyleSheet,
  View
} = React;

// --------------------------------------------------------------
// Application components
// --------------------------------------------------------------

var Animations = require('./Animations');
var BaseStyle = require('../utils/BaseStyle');
var Constants = require('../constants/AppConstants');
var EpisodeActions = require('../actions/EpisodeActions');
var Video = require('react-native-video').default;

// --------------------------------------------------------------
// Component declaration
// --------------------------------------------------------------

var Background = React.createClass({
  _animate: function () {
    Animated.timing(this.state.opacity, {
      toValue: this.props.opacity,
      duration: fadeDuration
    }).start(EpisodeActions.backgroundFinishedAnimating);
  },

  _renderBackground: function (background, isPreviousBackground) {
    if (!background) {
      return null;
    }

    var imageStyle = {};

    if (!isPreviousBackground) {
      imageStyle.opacity = this.state.opacity;
    }

    return (
      <Animated.Image
        //resizeMode="cover"
        source={{uri: background.src}}
        style={[styles.fullScreen, imageStyle]}
      />
    );
  },

  getDefaultProps: function () {
    return {
      backdropColor: '#000',
      opacity: 1
    };
  },

  getInitialState: function () {
    return {
      opacity: new Animated.Value(0),
      previousBackground: null
    };
  },

  componentDidMount: function () {
    //this._animate();
  },

  componentWillReceiveProps: function (newProps) {
    var newState = {
      opacity: new Animated.Value(0)
    };

    if (newProps.data.src !== this.props.data.src) {
      newState.previousBackground = this.props.data;
    }

    this.setState(newState);
  },

  shouldComponentUpdate: function (newProps, newState) {  
    if (this.props.data.src === newProps.data.src) {
      return false;
    }

    return true;
  },

  componentDidUpdate: function (oldProps, oldState) {
    //this._animate();
  },  

  render: function () {
    this._animate();

    return (
      <View style={[styles.fullScreen, {backgroundColor: this.props.backdropColor}]}>
        {this._renderBackground(this.state.previousBackground, true)}
        {this._renderBackground(this.props.data)}
      </View>
    );
  }
});

// --------------------------------------------------------------
// Styling
// --------------------------------------------------------------

var styles = StyleSheet.create({
  fullScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

module.exports = Background;

“严格使用”；
// --------------------------------------------------------------
//反应组分
// --------------------------------------------------------------
var React=require（'React-native'）；
变量{
有生气的
尺寸，
形象,，
样式表，
看法
}=反应；
// --------------------------------------------------------------
//应用程序组件
// --------------------------------------------------------------
var Animations=require（“./Animations”）；
var BaseStyle=require（'../utils/BaseStyle'）；
var常量=require（'../Constants/AppConstants'）；
var eposodeactions=require（“../actions/eposodeactions”）；
var Video=require（'react-native-Video'）。默认值；
// --------------------------------------------------------------
//组件声明
// --------------------------------------------------------------
var Background=React.createClass({
_设置动画：函数（）{
动画。计时（this.state.opacity{
toValue:this.props.opacity，
持续时间：衰减
}).开始（情节动作、背景结束）；
},
_renderBackground：功能（背景，isPreviousBackground）{
如果（！背景）{
返回null；
}
var imageStyle={}；
如果（！isPreviousBackground）{
imageStyle.opacity=this.state.opacity；
}
返回(
);
},
getDefaultProps:函数（）{
返回{
backdropColor:“#000”，
不透明度：1
};
},
getInitialState:函数（）{
返回{
不透明度：新的动画。值（0），
previousBackground:空
};
},
componentDidMount:函数（）{
//这个；
},
组件将接收道具：函数（新道具）{
var newState={
不透明度：新的动画。值（0）
};
if（newProps.data.src！==this.props.data.src）{
newState.previousBackground=this.props.data；
}
this.setState（newState）；
},
shouldComponentUpdate:函数（newProps，newState）{
if（this.props.data.src==newProps.data.src）{
返回false；
}
返回true；
},
componentDidUpdate:函数（oldProps、oldState）{
//这个；
},  
渲染：函数（）{
这个；
返回(
{this._renderBackground（this.state.previousBackground，true）}
{this._renderBackground（this.props.data）}
);
}
});
// --------------------------------------------------------------
//造型
// --------------------------------------------------------------
var styles=StyleSheet.create({
全屏：{
位置：'绝对'，
排名：0，
左:0,，
底部：0，
右:0,，
},
});
module.exports=背景；

如果您在它们上面放一个

键

会有帮助吗？您可以考虑将<代码> x渲染背景>代码>自身（非导出），例如<代码>层>代码>组件，修改<代码>背景。渲染< /C> >返回<代码> <代码>。尝试中途满足视图扩散算法？“只是一个想法。”汤姆不太清楚。（关于

key

；将尝试您在编辑中发布的代码）有趣的是，如果我在动画中添加

delay

值

1000

，我可以在图像消失并开始淡入之前看到图像更长时间（1s），这让我相信

Animated

引入了一个导致闪烁的微小延迟。^理想情况下，我能够保证不透明度为

0

，直到

Animated

启动并开始将其提升到

1

@Tom将其分离到另一个组件中也没有帮助：/我真的认为问题在于

Animated

有一个小延迟，但我看不到任何方法可以保证不透明度将

0

，直到

Animated

生效。