Welcome to JiKe DevOps Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
497 views
in Technique[技术] by (71.8m points)

How to make this code from flatlist to grid in react native

I am quite new on react native and been trying to make below code from flatlist to grid/column any help will be appreciated.

This code is for an app template which I am using and categories are in flatlist scroll I want to make it as grid/column.

            {
          home.categories_enabled ?
            <View style={{ flex: 1, width: width(100), backgroundColor: '#ffffff', alignItems: 'center', position: 'absolute', marginVertical: 190 }}>
              <View style={styles.flatlistCon}>
                <FlatList
                  data={home.categories}
                  renderItem={({ item, key }) =>
                    <TouchableOpacity key={key} style={styles.flatlistChild}
                      onPress={() => {
                        store.CATEGORY = item,
                        store.SEARCH_OBJ = {};
                        store.moveToSearchTXT = false
                        store.moveToSearchLoc=false
                        store.moveToSearch = true,
                          this.navigateToScreen('SearchingScreen', data.menu.adv_search)
                      }}
                    >
                      <Animatable.View
                        duration={2000}
                        animation="zoomIn"
                        iterationCount={1}
                        direction="alternate">
                        <Image style={{ height: height(6), width: width(15), resizeMode: 'contain' }} source={{ uri: item.img }} />
                      </Animatable.View>
                      <Text style={[styles.childTxt, { fontWeight: 'bold' }]}>{item.name}</Text>
                    </TouchableOpacity>
                  }
                  horizontal={true}
                  showsHorizontalScrollIndicator={false}
                // keyExtractor={item => item.email}
                />
              </View>
              <View style={{ flex: 1.3, width: width(100) }}></View>
            </View>
            :
            null
        }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to JiKe DevOps Community for programmer and developer-Open, Learning and Share
...