RN中 ref 的使用

Introduction:

    ChatFootBar为ChatScreenIndex中用到的一个组件。在ChatScreenIndex中，当监听到某一事件发生时，在ChatFootBar组件中显示一个提示的AnimatedView，若干秒后AnimatedView渐变消失。

 

ChatScreenIndex:

// 定义chatFoot
chatFoot = null;

// 调用startTipsAnimation方法
if (this.chatFoot) {
    this.chatFoot.wrappedInstance.startTipsAnimation();
    // this.chatFoot.startTipsAnimation();
}


// 引用chatFoot
 { this.chatFoot = ref; }}
/>

 

ChatFootbar:

constructor(props) {
    super(props);
    this.startTipsAnimation = this.startTipsAnimation.bind(this);
}

// 提示动画
startTipsAnimation() {
    if (this.fadeView) {
        this.fadeView.startAnimation();
    }
}

// 渲染NewTips
renderNewTips = () => {
    return (
         this.fadeView = s}
            style={chatFootBarStyles.fadeTipsView}
        >
            有新推荐
        
    );
};

// 页面渲染
render() {
    return (
        
            {this.renderNewTips()}
        
    );
}

 

class FadeInView extends Component {
    // 执行动画
    startAnimation = () => {
        this.state.fadeAnim.setValue(1);
        Animated.timing(
            this.state.fadeAnim,
            {
                toValue: 0,
                duration: 3000,
            },
        ).start();
    };
}