react-native - 将粘性标题添加到滚动视图

问题描述

有没有办法将标题添加到垂直滚动时粘滞但水平滚动时定期滚动的滚动视图。

<ScrollView
 directionalLockEnabled = {false} horizontal = {true} maximumZoomScale = {1} scrollEnabled = {true} minimumZoomScale = {.45} zoomScale = {1}
 onScroll = {this.handleScroll}
 scrollEventThrottle = {100}
 stickyHeaderIndicies = {[0]}
 >

<FlatList
contentContainerStyle = {{flexGrow: 1}}
style = {{height: 2000}}

           data = {this.state.data}
           ItemSpeparatorComponent = {this.renderSeparator}
           keyExtractor = {(x, i) => i.toString()}
           onEndReached = {this.loadMoreData}
           onEndReachedThreshold = {0.1}

           renderItem ={({item}) =>

               <View style = {{flex: 1, flexDirection: 'row'}}>
                  <View style = {{width:100, height: 100}}>
                  <Text style= {styles.itemText}>
                      {item.inletThread}
                  </Text>
                  </View>
                  <View style = {{width:115, height: 100}}>
                  <Text style= {styles.itemText}>
                      {item.manufacturer}
                  </Text>
                  </View>
                  <View style = {{width:165, height:100}}>
                  <Text style= {styles.itemText}>
                      {item.testPressure}
                  </Text>
                  </View>
                  <View style = {{width:182, height: 100}}>
                  <Text style= {styles.itemText}>
                      {item.workingPressure}
                  </Text>

                  </View>

                  <View style = {{width:80, height: 100}}>
                  <TouchableOpacity onPress={ this.SampleFunction.bind(this, item)}>
                  <Text style = {{textAlign: 'center', paddingTop: 25, fontWeight: 'bold', fontSize: 25}}>Click here</Text>
                  </TouchableOpacity>
                  </View>
               </View>
           }
           ItemSeparatorComponent = {this.renderSeparator}
           ListHeaderComponent = {this.renderHeader}
           stickyHeaderIndicies = {[0]}
       />
  </ScrollView>

这会使标题很好，但在任一方向滚动时它不会粘在屏幕顶部。我已经通过将标题放在滚动视图中并同步两个滚动视图 x 组件来使其工作，但是由于状态调用，此方法非常慢。

如果有人有另一种方法，我可以尝试一下，那就太好了。

标签： react-native

react-native - 将粘性标题添加到滚动视图

问题描述

解决方案

推荐阅读