Как заполнить значение массива в пользовательском интерфейсе в соответствии с ключом в SectionList - PullRequest
Новая
       16

Как заполнить значение массива в пользовательском интерфейсе в соответствии с ключом в SectionList

0 голосов
/ 25 марта 2020

В моем коде я получаю значение ниже массива и заполняю эти значения на основе ключа в SectionList. Все значения ключа в интерфейсе отображаются правильно, но в моем визуализирующем элементе я столкнулся с некоторой проблемой. См. Ниже во втором разделе, который я объяснил подробнее. В основном, в функции рендеринга я хочу передать значение ключа также

// ниже - значение массива 

 customerSearch:[
                    {
                      "key": "Customer",
                      "data": [
                        {
                          "name": "John",
                          "status": "Active",
                          "nationalId": "NBGVH6676",
                          "flag": "cus",
                        },
                        { "name": "Abhi",
                          "status": "Active",
                          "nationalId": "NBGVH6890",
                          "flag": "cus"
                        }
                      ]
                    },
                    {
                      "key": "Requests",
                      "data": [
                        {
                          "name": "Request 1",
                          "status": "Active",
                          "nationalId": "K0089"
                        },
                        { "name": "Request 2",
                          "status": "Active",
                          "nationalId": "AS420"

                        }
                      ]
                    },
                    {
                      "key": "Invoice",
                      "data": [
                        {
                          "name": "Invoice No 1",
                          "status": "Active",
                          "nationalId": "IN998"
                        },
                        { "name": "Invoice No 2",
                          "status": "Active",
                          "nationalId": "ABh007"

                        }
                      ]
                    },
                  ]

// Здесь я заполняю данные внутри определенного ключа Здесь в моем я получаю, что массив, который находится внутри значения ключа. В то время как я должен поставить какое-то условие, например, в ключе «Клиент», я должен отображать аватар. Но здесь не приходит значение ключа. Пожалуйста, помогите 

renderItems = ({ item }) => (
        <View>
      {key==='Customer' ?

        <View style={{ flex: 1, flexDirection: 'row', margin: 10,padding:5}}>
            <Avatar avatarSize={50}
                name={item.name}
                isTouchable={false} />
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
                <Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
                    {item.name}
                </Text>
                <Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 10 }}>
                    National Id : {item.id}
                </Text>
                {
                    item.status === 'Active' ?
                        <View style={{
                            flex: 1,
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                            width: 100,
                            paddingLeft:5
                        }}>
                            <View style={{
                                padding: 5,
                                backgroundColor: '#2CAC40',
                                borderRadius: 20,
                                height: 10,
                                width: 10,
                                marginTop: 4,
                                marginRight: 4,
                            }} />
                            <Text note
                                style={{ flex: 1, color: '#2CAC40', fontSize: hp('2.3%'), justifyContent: 'center' }}>
                                {item.status}
                            </Text>
                        </View> :
                        <View style={{
                            flex: 1,
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                            width: 100,
                        }}>
                            <View style={{
                                padding: 5,
                                backgroundColor: '#CC2828',
                                borderRadius: 20,
                                height: 10,
                                width: 10,
                                marginTop: 4,
                                marginRight: 4
                            }} />
                            <Text note style={{ flex: 1, color: '#CC2828', fontSize: hp('2.2%') }}>
                                {item.status}
                            </Text>
                        </View>
                }
            </View>
        </View>:

        <View style={{ flex: 1, flexDirection: 'row', margin: 5,padding:5}}>
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
                <Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
                    {item.name}
                </Text>
                <Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 5,paddingBottom:10 }}>
                    National Id : {item.nationId}
                </Text>
                <View style={{ width: '100%', height: '.5%', backgroundColor: 'black' }}></View>

            </View>
        </View>}
        </View>
    )

// Ниже код в функции рендеринга 

   <View style={{ marginLeft: 5, marginRight: 5, marginTop: 5, backgroundColor: '#fff' }}>

                        <SafeAreaView style={{ flex: 1, marginTop: 20 }}>
                            <SectionList
                                sections={globalSearchData}
                                keyExtractor={(item, index) => item + index}
                                renderSectionHeader={({ section }) => (
                                <RegularText text={`${section.key}`}  textColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureHeadingColor : null} style={{ fontSize: hp('2.5%') ,paddingLeft:15}}/>
                                )}
                                renderItem={this.renderItems}

                            />
                        </SafeAreaView>

                    </View>



Example UI display
Customer
Name
Status
National ID
Name Status
National ID

Request
Name Status
National ID
Name Status
National ID

Спасибо

1 Ответ

1 голос
/ 25 марта 2020

В вашем renderItems методе вам также необходимо деструктурировать section. Затем вы можете получить доступ к ключу с помощью section.key.

Код: 

renderItems = ({ item, section }) => (
   const key = section.key;
   // other Code ...
);
...