Блог

Я пытался погуглить это, но из-за того, что английский язык не является моим лучшим навыком, мне трудно найти в Google нужную вещь. Я пытался исправить эту проблему самостоятельно, которая работает, но мне интересно, есть ли лучшие способы сделать это.

Ситуация:

У меня есть объект json, и я хочу отобразить значения в нем, поэтому я сопоставил значения и отобразил их в компоненте. Мне нужно вызвать этот компонент только один раз, и он отобразит себя несколько раз в зависимости от того, сколько объектов находится в моем объекте json.

Теперь, когда я запускаю функцию onPress для одного конкретного отображаемого экземпляра, она будет запускаться для каждого отображаемого экземпляра.

Желаемая ситуация:

Когда у меня есть несколько отображаемых экземпляров моего компонента, и я запускаю onPress для одного из них, он должен запускаться только для этого экземпляра.

Код:

Я выполняю запрос get, и ответ возвращает объект json:

 {
"objects": [
    {
        "name": "Alarm chauffeurs@ON=100",
        "object_id": 1,
        "input_value": 0,
        "last_changed": "2019-03-08T14:30:54",
    }, ...
  

Затем я сопоставляю значения своему компоненту:

       let cards = this.state.dataSource.objects.map((val, key) => {
      return (
         <Animated.View key={key} style={[cardStyle.container, { height: this.state.collapse[parseInt(val.object_id)] }]}>
            <TouchableHighlight onPress={() => this.toggle(val.object_id)} />
         </Animated.View>
      );
      });
  

Теперь мне нужно вызвать {cards} в моем MainView только один раз, и React Native отобразит несколько карточек:

       return (
         <View style={style.container}>
            <View style={style.colDash}>
               <ScrollView>
                  {cards}
               </ScrollView>
            </View>
        </View>
      );
  

Вот изображение выходных данных

Теперь, как только я нажимаю кнопку, onPress запускается для каждого компонента на экране.

Я пытался:

Создал массив и вставил в него случайное значение, которое id всегда начинается с 1. Остальное выполняется с помощью простого цикла for. Вероятно, это не лучший способ справиться с моей проблемой.

   toggle(id) {
     var test = []
     test.push(123);
     for (var i = 1; i < 8; i  ) {
         if (id == i) {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                   toValue: 150,
                   duration: 500,
                }
             ).start()
             test.push(temp);
         }
         else {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                    toValue: 75,
                    duration: 1,
                }
             ).start()
             test.push(temp);
        }
     }
     this.setState({
         collapse: test
      });
  

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

Добавьте индекс к вашему компоненту TouchableHighlight и попробуйте затем