react-native – React Native获取SectionList中的第一行
发布时间:2020-12-15 16:20:00 所属栏目:百科 来源:网络整理
导读:有没有办法在滚动时知道React Native的SectionList中当前的顶行?我想根据活动部分更改另一个组件. 解决方法 我创造了一个例子.我不知道你如何使用react-native进行调试,但我使用 Reactotron进行调试.这里的诀窍是使用onViewableItemsChanged.我已经找到并应
有没有办法在滚动时知道React Native的SectionList中当前的顶行?我想根据活动部分更改另一个组件.
解决方法
我创造了一个例子.我不知道你如何使用react-native进行调试,但我使用
Reactotron进行调试.这里的诀窍是使用onViewableItemsChanged.我已经找到并应用了从
here获得帮助的解决方案.当视图更改时,可见项目列表保留在对象info.viewableItems上.第一项是屏幕上的可见项目.而且你也可以得到它属于哪个部分的项目.但是你应该知道,当粘性节头改变时,第一行将是节数据本身.我没有那么多反应原生的经验,但我希望这对你有所帮助.
import React,{ Component,} from 'react'; import { Text,View,StyleSheet,SectionList,} from 'react-native'; import Reactotron from 'reactotron-react-native'; const leagues = [ { title: 'LEAGUE 1',data: ['psg','caen','monaco',],key: 1 },{ title: 'BUNDESLIGA',data: ['schalke','leverkusen','hannover'],key: 2 },{ title: 'SERIE A',data: ['juventus','napoli','roma'],key: 3 },{ title: 'Super Lig',data: ['galatasaray','fenerbah?e','be?ikta?'],key: 4 },]; class SectionListExample extends Component { constructor(props) { super(props); } renderHeader(headerItem) { return ( <View style={{ backgroundColor: '#000000' }}> <Text style={styles.headerText}>{headerItem.section.title} </Text> </View> ); } onRenderSectionHeader({ section }) { return <Text style={{ padding: 5,color: 'blue' }}>{section.title} </Text> } _onViewableItemsChanged = ( info = { viewableItems: { key,isViewable,item: { columns },index,section },changed: { key,section } },) => { // const reducer = (accumulator,currentValue) => { // if (accumulator) { // if (accumulator !== currentValue) { // Reactotron.log(currentValue); // // Reactotron.log(viewableItems) // } // } // else { // return false; // } // } // info.changed.reduce(reducer); // you will see here the current visible items from top to bottom... Reactotron.log(info.viewableItems); }; render() { return ( <View style={{ flex: 1 }} > <SectionList sections={leagues} renderItem={ ({ item }) => { return <Text style={{ padding: 40,color: 'red' }}>{item}</Text> } } renderSectionHeader={ this.onRenderSectionHeader } stickySectionHeadersEnabled onViewableItemsChanged={this._onViewableItemsChanged} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',backgroundColor: '#FFFFFF',},text: { fontSize: 20,color: 'black',headerText: { fontSize: 30,color: 'red' } }); export { SectionListExample } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |