RN中 ref 的使用

最新推荐文章于 2025-07-06 16:16:05 发布

原创最新推荐文章于 2025-07-06 16:16:05 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

React-Native 同时被 2 个专栏收录

5 篇文章

订阅专栏

Tips-Mark(RN)

2 篇文章

订阅专栏

本文介绍了一个名为ChatFootBar的组件，该组件用于在ChatScreenIndex中展示带有动画效果的提示信息。当触发特定事件时，ChatFootBar通过AnimatedView显示提示并自动消失。

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