refre sh компонент после публикации нового элемента в firebase | реагировать родной - PullRequest
Новая
       46

refre sh компонент после публикации нового элемента в firebase | реагировать родной

0 голосов
/ 18 июня 2020

Я пытаюсь создать приложение с временной шкалой фотографий или видео. Все получилось, в качестве бэкенда я использую базу данных Firebase в реальном времени. Когда пользователь входит в систему, он / она первым видит временную шкалу с сообщениями. Это работает нормально, но если я затем добавлю сообщение, и пользователь откроет приложение, оно загрузит новые сообщения и старые сообщения, но предыдущие сообщения также останутся. поэтому, если у меня есть 2 сообщения для пользователя и я добавляю 1, этот пользователь увидит 5 сообщений. Теперь мне интересно, есть ли возможность обновлять sh компонент каждый раз, когда он загружается? Или можно еще что-нибудь? В настоящее время это мой код: 

    downloadImage(post){
      console.log("getted post"+post);
      let fullPost = post;
      let dirs =RNFetchBlob.fs.dirs;

      RNFetchBlob
      .config({
        fileCache : false,
        appendExt: 'mp4',
        addAndroidDownloads : {
          useDownloadManager : true, // <-- this is the only thing required
          // Optional, override notification setting (default to true)
          notification : false,
          // Optional, but recommended since android DownloadManager will fail when
          // the url does not contains a file extension, by default the mime type will be text/plain
          mime : 'mp4',
          description : 'File downloaded by download manager.',
          path: RNFetchBlob.fs.dirs.DownloadDir+"/filename.ext"
      }

      })
      .fetch('GET', fullPost.image, {
        //some headers ..
      })
      .then((res) => {
        // the temp file path
        //console.log('The file saved to ', res.path())

        let path =res.path();
        console.log("post infp:"+RNFetchBlob.fs.dirs.DocumentDir);
          var newelement = {date: fullPost.date, function: fullPost.function,image: path,name: fullPost.name, profileImage: fullPost.profileImage, text: fullPost.text, type:fullPost.type};
          this.setState(prevState => ({
            messages: [...prevState.messages, newelement]
          }))
      })

    }

 setVideoPostst(posts){
      for(i=0; i< posts.length;i++){
        if(posts[i].type === true){
          console.log('afbeelding')
          var newelement = {date: posts[i].date, function: posts[i].function,image:posts[i].image,name: posts[i].name, profileImage: posts[i].profileImage, text: posts[i].text, type:posts[i].type};
          this.setState(prevState => ({
            messages: [...prevState.messages, newelement]
          }))
        }
        if(posts[i].type === false){
          console.log('video');
          this.downloadImage(posts[i]);




        }
      }

    }


    getMessages(key){
      console.log('fetch');
      RNFetchBlob.fs.unlink( RNFetchBlob.fs.dirs.DownloadDir).then(() => {})
      let ref = firebase.database().ref('/messages/'+key+'/posts');
      ref.on('value' , snapshot =>{

          var state = snapshot.val();
          if(state != null){
            this.setState({
              messagesAvailable: true
            });

this.setVideoPostst(state);
          }



      })  
    }
    componentWillMount(){
      SplashScreen.hide();
      this.setState({
        messages:[]
      })
      let user = firebase.auth().currentUser;
      console.log("uid"+user.uid);
      let ref = firebase.database().ref('users/' + user.uid);
      ref.on('value' , snapshot =>{
          var state = snapshot.val();
          this.setState({
            loggedinuser: state.messageKey,
            uid: state.userUid,
          })
          this.getMessages(state.messageKey);
        })
      }

Я уже пробовал использовать componentDidUnmount и componentWillReceiveProps, но, к сожалению, безуспешно, есть ли кто-нибудь, кто может объяснить мне, как лучше всего подойти к этому?

...