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

时间:2018-07-30 16:01:49

标签: 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组件来使其工作,但是由于状态调用,此方法非常慢。

如果有人有其他方法,我可以尝试一下。

2 个答案:

答案 0 :(得分:1)

也许这很晚了,但是在这里搜索这个问题的每个其他人都是我资助的github项目(不是我的):GitHub Link

答案 1 :(得分:-2)

使用本机库中的{标头}。

从本机库中导入

您可以在此处浏览文档:- https://github.com/GeekyAnts/NativeBase