Introduction:
ChatFootBar为ChatScreenIndex中用到的一个组件。在ChatScreenIndex中,当监听到某一事件发生时,在ChatFootBar组件中显示一个提示的AnimatedView,若干秒后AnimatedView渐变消失。
ChatScreenIndex:
// 定义chatFoot
chatFoot = null;
// 调用startTipsAnimation方法
if (this.chatFoot) {
this.chatFoot.wrappedInstance.startTipsAnimation();
// this.chatFoot.startTipsAnimation();
}
// 引用chatFoot
<ChatFootBar
ref={(ref) => { this.chatFoot = ref; }}
/>
ChatFootbar:
constructor(props) {
super(props);
this.startTipsAnimation = this.startTipsAnimation.bind(this);
}
// 提示动画
startTipsAnimation() {
if (this.fadeView) {
this.fadeView.startAnimation();
}
}
// 渲染NewTips
renderNewTips = () => {
return (
<FadeInView
ref={s => this.fadeView = s}
style={chatFootBarStyles.fadeTipsView}
>
<Text style={{ fontSize: 15, color: 'red', textAlign: 'center' }}>有新推荐</Text>
</FadeInView>
);
};
// 页面渲染 render() { return ( <View style={newProps.style}> {this.renderNewTips()} </View> ); }
class FadeInView extends Component {
// 执行动画
startAnimation = () => {
this.state.fadeAnim.setValue(1);
Animated.timing(
this.state.fadeAnim,
{
toValue: 0,
duration: 3000,
},
).start();
};
}