Как скрыть отдельный элемент в функции карты в React Native onPress?

Предположим, мне дан объект элементов, который я зацикливаю на карте и визуализирую. Когда я нажимаю на один из списков, я ожидаю, что этот элемент скроется от рендеринга.

Object.keys(this.state.doctors).map((uid, i) => { return (
<View style={styles.doctorContainer} key={uid}>
  <View style={styles.imgCircleContainer}>
    <View>
      <Image style={styles.userImg} source={require( '../Images/Naseebullah.jpg')} resizeMode="contain" />
      <View style={styles.imgOverlay} />
    </View>
  </View>

  <View>
    <Text style={{textAlign: 'center', fontSize: 15, color: '#bccad0'}}>{this.state.doctors[uid].name}</Text>
    <Text style={{textAlign: 'center', fontSize: 12, color: 'rgba(188, 202, 208, 0.7)'}}>{this.state.doctors[uid].profession}</Text>
  </View>

  <TouchableOpacity style={styles.folllowBtn} onPress={()=> Database.followDoctor( this.state.doctors[uid].name, this.state.doctors[uid].profession, uid, this.state.type, this.state.healthAlert )}>
    <Text style={{color: 'white', fontSize: 13, fontWeight: 'bold', textAlign: 'center'}}>Follow</Text>
  </TouchableOpacity>

</View>
) })

Итак, когда Database.followDoctor() вызывается onPress. Этот элемент должен скрываться. Не весь список. Как этого добиться?

Я исхожу из фона angularjs, в котором angular у нас есть так называемые локальные переменные, назначенные каждому элементу в цикле, и мы можем их обусловить. Но как этого добиться в React Native?

Редактировать

Метод followDoctor () бесполезен, потому что это метод, который передается на сервер firebase.

static followDoctor(msgTo, profession, uid, type, healthAlert) {
  User().then(user => {
    firebase.app().database().ref(`/Users/${user.uid}/Doctors/${uid}`).set({
      name: msgTo,
      profession: profession
    }).then(() => {
      console.log("successfully added to DoctorsList!");
      this.initialiseMessagesDB(msgTo, healthAlert, uid).then(() => {
        //this.setMessage(uid, type);
      })
      //this.setMessage(uid, type, healthAlert, userName);
    }).catch(e => console.log(e));
  });
}

Проблема заключается в функции onPress. Если бы мы могли как-то сделать что-то в функции кнопки onPress () и скрыть элемент, то было бы здорово.

В чем тогда моя проблема?

Проблема не в том, что я не могу их отфильтровать. Фактически, моя текущая реализация отфильтровывает их. Но проблема заключается во времени между событием щелчка и скрытием элемента. Поскольку щелчок идет даже на firebase и добавляет объект (который добавляет доктора к объекту), он создает задержку в несколько миллисекунд. Я хотел бы скрыть элемент, как только он будет нажат, а в фоновом режиме я проверяю firebase, а что нет.


react-native javascript object render react-native-maps
person Doe    schedule 21.02.2018    source источник
comment
Не могли бы вы поделиться всем своим кодом, включая исходный код Database.followDoctor?   -  person Alex Yuly    schedule 21.02.2018
comment
Пожалуйста, проверьте мою правку выше. @AlexYuly   -  person Doe    schedule 21.02.2018
comment
Вам нужно, чтобы это показывалось снова? один из способов - отфильтровать его из this.state.doctors при его нажатии, что приведет к повторному отображению списка без этого элемента. Также вы можете рассмотреть возможность использования плоского списка для повышения производительности.   -  person Matt Aft    schedule 21.02.2018
comment
Если вы хотите, чтобы он был постоянным, вы всегда должны отфильтровывать врачей, за которыми следит пользователь, перед установкой this.state.doctors, и когда один из них будет нажат и связь будет создана, снова получите список врачей.   -  person Matt Aft    schedule 21.02.2018
comment
@MattAft: Нет, мне не нужно показывать это снова. После нажатия он должен скрыться. Текущая реализация, которая у меня есть, скрывает это, но при нажатии на нее проходит много времени (около 400 миллисекунд), прежде чем она скрывается. Это потому, что в моем setState ({}) он обращается к firebase и добавляет доктора, а затем фильтрует список. Но я бы хотел скрыть это прямо сейчас, и фильтр может работать на заднем плане.   -  person Doe    schedule 21.02.2018
comment
Просто отфильтровать текущего доктора? весь смысл response / react native заключается в использовании шаблона проектирования, который они вам рекомендуют использовать, чтобы он работал наилучшим образом.   -  person jdmdevdotnet    schedule 21.02.2018
comment
@jdmdevdotnet Я понимаю это. Проблема не в том, что я не могу их отфильтровать. Фактически, моя текущая реализация отфильтровывает их. Но проблема заключается во времени между событием щелчка и скрытием элемента. Поскольку щелчок идет даже на firebase и добавляет объект (который добавляет доктора к объекту), он создает задержку в несколько миллисекунд. Я хотел бы скрыть элемент, как только он будет нажат, и в фоновом режиме я проверяю firebase, а что нет   -  person Doe    schedule 22.02.2018
comment
затем в followDoctor отфильтруйте его и обновите состояние перед переходом в firebase   -  person Matt Aft    schedule 22.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам нужно отфильтровать это из списка. Создайте логическое значение в объекте с именем visible и примените метод filter перед map - что-то вроде:

Object.keys(this.state.doctors).filter(uid => uid.visible).map((uid, i) => { return ( А затем, когда вы вызываете Database.followDoctor(), вы переключаете этот флаг.

Если вы не хотите, чтобы эти флаги сохранялись в вашей БД, вы можете добавить их к данным (изначально установлено значение true) при загрузке из БД и удалить их перед сохранением.

person Kevin    schedule 21.02.2018