javascript - React Native - The selected item is always in the middle of the Flatlist - Stack Overflow

admin管理员组

文章数量:1356294

I want to make sure that the selected item is always in the middle of the flatlist. The middle item is selected. The style of the chosen one is different than the others.

 <FlatList data={items}
                                      style={styles.listStyle}
                                      ref={(ref) => {
                                          this.flatListRef = ref;
                                      }}
                                      snapToAlignment={'center'}
                                      horizontal

                                      onPress={this.onPressButton}
                                      showsHorizontalScrollIndicator={false}
                                      renderItem={({item, index}) => (
                                          <TouchableWithoutFeedback style={{justifyContent: 'center'}}
                                                                    onPress={this.onPressButton}>
                                              <View style={{justifyContent: 'center'}}>
                                                  <View   style={styles.containerView}>
                                                      <View
                                                          style={[styles.circlesBack, (this.state.selectedId === index) ? styles.circles : styles.circlesBack]}>
                                                          {this.state.selectedId === index ?
                                                              <FontAwesome size={24} name={item.icon} color="white"/> :
                                                              <FontAwesome size={24} name={item.icon} color="#BEBEBE"/>}
                                                      </View>
                                                      {this.state.selectedId === index ? <Text
                                                              style={[styles.itemText, (this.state.selectedId === index) ? styles.itemText : styles.itemTextBack]}>{item.title}</Text> :
                                                          <Text> </Text>}

                                                  </View>
                                              </View>
                                          </TouchableWithoutFeedback>
                                      )}
                                      keyExtractor={item => item.id}/>

this is what it looks like now

it should look like this

How to do it?

Thank you

I want to make sure that the selected item is always in the middle of the flatlist. The middle item is selected. The style of the chosen one is different than the others.

 <FlatList data={items}
                                      style={styles.listStyle}
                                      ref={(ref) => {
                                          this.flatListRef = ref;
                                      }}
                                      snapToAlignment={'center'}
                                      horizontal

                                      onPress={this.onPressButton}
                                      showsHorizontalScrollIndicator={false}
                                      renderItem={({item, index}) => (
                                          <TouchableWithoutFeedback style={{justifyContent: 'center'}}
                                                                    onPress={this.onPressButton}>
                                              <View style={{justifyContent: 'center'}}>
                                                  <View   style={styles.containerView}>
                                                      <View
                                                          style={[styles.circlesBack, (this.state.selectedId === index) ? styles.circles : styles.circlesBack]}>
                                                          {this.state.selectedId === index ?
                                                              <FontAwesome size={24} name={item.icon} color="white"/> :
                                                              <FontAwesome size={24} name={item.icon} color="#BEBEBE"/>}
                                                      </View>
                                                      {this.state.selectedId === index ? <Text
                                                              style={[styles.itemText, (this.state.selectedId === index) ? styles.itemText : styles.itemTextBack]}>{item.title}</Text> :
                                                          <Text> </Text>}

                                                  </View>
                                              </View>
                                          </TouchableWithoutFeedback>
                                      )}
                                      keyExtractor={item => item.id}/>

this is what it looks like now

it should look like this

How to do it?

Thank you

• javascript
• node.js
• reactjs
• react-native

Share Improve this question Follow asked Apr 5, 2020 at 10:34 ntx2ntx2 3111 silver badge66 bronze badges 2

• Is this answer what you want ? stackoverflow./a/43512934/13107433 – 高鵬翔 Commented Apr 6, 2020 at 1:22
• I tried. Unfortunately, that didn't help. – ntx2 Commented Apr 6, 2020 at 6:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You should use like this:

this.flatListRef.scrollToIndex({animated: true, index: 30, viewPosition:0.5})

Valid params keys are:

'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to true.

'viewPosition' (number) - A value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5 centered in the middle.

Here is someone's code for example, you can instead the line

this.flatListRef.scrollToIndex({animated: true, index: 30,viewPosition:0.5});

of

this.flatListRef.scrollToIndex({animated: true, index: randomIndex});

then you can see it works(at right choose android or ios to run will be better)

docs

But the several begins item seems can't go to middle because of there are no data before. Or you can use react-native-infinite-looping-scroll to let other data at bottom connect back to first. Maybe can achieve this problem.

本文标签： javascriptReact NativeThe selected item is always in the middle of the FlatlistStack Overflow