Как сохранить реквизит в дочернем компоненте внутри Flatlist? - PullRequest
Новая
       7

Как сохранить реквизит в дочернем компоненте внутри Flatlist?

0 голосов
/ 09 июля 2019

В настоящее время я использую React-Native Flatlist с пользовательским компонентом для отображения данных.В пользовательском компоненте отображается карта, а при щелчке должна отображаться модальная (точнее, RBSheet).

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

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

Я былне удалось связать карту для получения данных от ее реквизита.

Мой пользовательский компонент (Entry.js) 

return (
    <View
      style={{
        flexDirection: "row",
        alignContent: "center",
        alignItems: "center",
        textAlign: "center",
        marginBottom: "5%"
      }}
    >
      <View style={{ flexDirection: "row" }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            textAlign: "justify"
          }}
        >
          <Card
            style={{
              padding: 10,
              elevation: 2,
              margin: 10,
              textAlign: "center",
              width: "95%",
              borderRadius: 20
            }}
            onPress={() => this.RBSheet.open()}
          >
            <Card.Content>
              <Image
                source={{
                  uri:
                    "http://guiadigital.madridactiva.anovagroup.es/" +
                    props.item.fotos[0]
                }}
                style={{
                  width: "100%",
                  height: 200,
                  padding: 5,
                  borderRadius: 10
                }}
                PlaceholderContent={<ActivityIndicator />}
              />

              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(3.5),
                  paddingTop: 25,
                  textAlign: "center"
                }}
              >
                {props.item.nombre}
              </Text>

              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(2),
                  paddingTop: 15,
                  textAlign: "center"
                }}
              >
                {props.item.descripcion.split(".")[0]}
              </Text>
            </Card.Content>
          </Card>
        </View>
      </View>
      <RBSheet
        ref={ref => {
          this.RBSheet = ref;
        }}
        animationType="slide"
        closeOnPressMask={true}
        height={RF(80)}
        duration={100}
        customStyles={{
          container: {
            justifyContent: "center",
            alignItems: "center",
            textAlign: "center",
            alignContent: "center",
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20
          }
        }}
      >
        <Text
          style={{
            color: "#484855",
            fontSize: RF(3.5),
            paddingTop: 25,
            textAlign: "center"
          }}
        >
          {props.item.nombre}
        </Text>
      </RBSheet>
    </View>
  );

Мой плоский список (на всякий случай) 

<View
            style={{
              flex: 1,
              justifyContent: "center",
              textAlign: "center",
              alignItems: "center",
              marginTop: "5%"
            }}
          >
            <FlatList
              style={{
                width: "100%",
                alignContent: "center",
                backgroundColor: "#000"
              }}
              data={this.state.data}
              showsVerticalScrollIndicator={true}
              keyExtractor={item => item.nombre}
              renderItem={({ item }) => <Entry item={item} />}
            />
          </View>

Я бы хотел иметь возможность обрабатывать данные либо в моем пользовательском компоненте, либо на экране плоского списка

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Я уже исправил свою проблему, проблема была в том, что компонент не был объявлен как класс, поэтому он не хранит реквизиты должным образом.

Как только компонент объявлен и экспортирован как класс, каждый элемент в плоском списке является объектом со своими собственными опорами.

0 голосов
/ 09 июля 2019

С shouldComponentUpdate я думаю, что вы сможете контролировать данные внутри дочернего компонента. См. Реактивные документы для получения дополнительной информации https://it.reactjs.org/docs/react-component.html#shouldcomponentupdate

...