1

了解我的问题的简单方法播放以下视频，看看我的问题是什么。 https://vimeo.com/315390850

如果您没有良好的网络连接，请阅读以下句子。

我要更新气泡消息，但我不知道如何按 ID 更新特定消息。示例：在 html 中，列表中的每个标签都有一个和 Id，如果我们必须更新，那么我们通过 id 选择它，然后更新它。那么如何为 react-native-gifted-chat 气泡消息创建这样的概念呢？

我尝试将 refs 与 setNativeProps 函数一起使用，但没有奏效。

render(){
 return (
   <GiftedChat
         extraData={this.state}
         messages={this.state.messages}
          onSend={messages => this.onSend(messages)}
          user={{
              _id: this.state.userId,
           }}
           renderBubble={this.renderBubble}
           renderInputToolbar={this.renderInputToolbar.bind(this)}
      />
 );
}

renderBubble = props => {
        if (props.currentMessage.audio) {
            return (
                <View style={[{ width: 150, height: 70, backgroundColor: 'lightgray' }, props.position === 'left' ? { left: -41 } : {}]}>
                    <EIcon
                        name="google-play"
                        size={30}
                        color={this.state.playAudio ? "red" : "blue"}
                        style={{
                            left: 90,
                            position: "relative",
                            shadowColor: "#000",
                            shadowOffset: { width: 0, height: 0 },
                            shadowOpacity: 0.5,
                            backgroundColor: "transparent"
                        }}
                        onPress={() => {
                            this.setState({
                                playAudio: true
                            });
                            const sound = new Sound(props.currentMessage.audio, "", error => {

                                if (error) {
                                    console.log("failed to load the sound", error);
                                }

                                const duration = sound.getDuration();
                                const progressPhase = 1 / duration;

                                if (duration !== 0) {
                                    this._interval = setInterval(() => {

                                        this.setState({
                                            progress: this.state.progress += progressPhase
                                        });

                                        if (this.state.progress >= 1) {
                                            clearInterval(this._interval);
                                            this.setState({
                                                progress: 0.0,
                                                playAudio: false
                                            });
                                        }

                                    }, 1000);
                                }

                                sound.play(success => {
                                    console.log(success, "success play");
                                    if (!success) {
                                        Alert.alert("There was an error playing this audio");
                                    }
                                });

                            });
                        }}
                    />


                    <Progress.Circle progress={this.state.progress} showsText size={35} />

                </View>
            );
        } else {
            return (
                <Bubble
                    {...props}
                    textStyle={{
                        right: {
                            color: '#fff',
                        },
                        left: {
                            color: '#fff',
                        },
                    }}
                    wrapperStyle={{
                        left: {
                            backgroundColor: "orange",
                            left: -41
                        },
                        right: {
                            backgroundColor: 'green'
                        }
                    }}
                />
            );
        }
    }

在这里，当我发送多条音频消息时，我有一个聊天框，例如 3 条音频消息：音频消息 .1、音频消息 0.2、音频消息 .3 音频消息 .1 是第一次来的。音频消息 .3 上次来了。

每条音频消息都有一个播放图标和一个进度条。当我点击播放图标时，我会更新进度条。在这里，我使用间隔单击播放图标，进度条会多次更新，直到完成。

我的问题是：当我单击音频消息 .1 的播放图标时，只有最后一条音频消息 .3 得到更新。我想要：如果我点击音频消息 .1，音频消息 .1 的进度条应该会更新。音频信息 .2 和音频信息 .3 相同。

4

1 回答 1

1

我通过条件渲染解决了我的问题我还更改了以下课程并添加了这一行：next.audio == current.audio ||

export default class Message extends React.Component {

  shouldComponentUpdate(nextProps) {
    const next = nextProps.currentMessage;
    const current = this.props.currentMessage;
    const { nextMessage } = this.props;
    const nextPropsMessage = nextProps.nextMessage;
    return (
      next.send !== current.send ||
      next.received !== current.received ||
      next.pending !== current.pending ||
      next.createdAt !== current.createdAt ||
      next.text !== current.text ||
      next.image !== current.image ||
      next.video !== current.video ||
      next.audio == current.audio ||  // this line added by me
      nextMessage !== nextPropsMessage
    );
  }

 //..............

}

我添加了这个条件，请让我知道性能。这条树线，我添加到我的代码中：

this.myPro = <Progress.Circle progress={this.state.progress} showsText size={35} />; this.setState({currentPlayedMessage: props.currentMessage._id }); { props.currentMessage._id === this.state.currentPlayedMessage ? this.myPro : null }

所有代码：

if (props.currentMessage.audio) {

            this.myPro = <Progress.Circle progress={this.state.progress} showsText size={35} />; // this line added

            return (
                <View style={[{ width: 150, height: 70, backgroundColor: 'lightgray' }, props.position === 'left' ? { left: -41 } : {}]}>
                    <EIcon
                        name="google-play"
                        size={30}
                        color={this.state.playAudio ? "green" : "blue"}
                        style={{
                            left: 90,
                            position: "relative",
                            shadowColor: "#000",
                            shadowOffset: { width: 0, height: 0 },
                            shadowOpacity: 0.5,
                            backgroundColor: "transparent"
                        }}
                        onPress={() => {

                            this.setState({
                                playAudio: true,
                                currentPlayedMessage: props.currentMessage._id // this line added
                            });

                            const sound = new Sound(props.currentMessage.audio, "", error => {

                                if (error) {
                                   return;
                                }

                                const duration = sound.getDuration();
                                const progressPhase = 1 / duration;

                                if (duration !== 0) {
                                    this._interval = setInterval(() => {

                                        this.setState({
                                            progress: this.state.progress += progressPhase
                                        });

                                        if (this.state.progress >= 1) {
                                            clearInterval(this._interval);
                                            this.setState({
                                                progress: 0.0,
                                                playAudio: false
                                            });
                                        }

                                    }, 1000);
                                }

                                sound.play(success => {
                                    console.log(success, "success play");
                                    if (!success) {
                                        Alert.alert("There was an error playing this audio");
                                    }
                                });

                            });
                        }}
                    />


                    { props.currentMessage._id === this.state.currentPlayedMessage ? this.myPro : null } // this line added

                </View>
            );
        }
于 2019-02-05T09:23:26.910 回答