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

<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();

    };

}