如何解决在列表中加载更多数据时，平面列表项目中的引用未返回正确的PageY位置
我正在尝试在平面列表项下方显示下拉列表。分页是在Flatlist中实现的，因此当我加载第一页的数据时，下拉位置会准确计算。但是当我为另一页加载数据时，引用测量方法中的pageY位置会因列表大小而增加。因此，由于此下拉菜单未在可见区域显示。我附上我的代码以供参考。
这是我的渲染方法。
render() {
let { list,} = this.props;
const {top,listVisibity,articleDropdown} = this.state;
return (
<View style={{flex:1}}>
<OptimizedFlatList
maxToRenderPerBatch={10}
windowSize={16}
onEndReached={() => this.onEndReached()}
nestedScrollEnabled={false}
onScrollBeginDrag = {() => this.setState({listVisibity:false})}
onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.01}
onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
data={list}
renderItem={({ item }) => this._renderItem(item)}
keyExtractor={item => item.id}
style={{ flexGrow: 1}}
ListFooterComponent={this.footer}
/>
</view>
}
这是列表和子列表的呈现
_renderItem = item => {
return (
<View style={styles.container}>
<ShadowView style={styles.shadowStyle}>
<View style={styles.listItem} >
<View style={{ flex: 0.6,flexDirection: 'row' }}>
<Image
source={constants.images.dot}
style={{ alignSelf: 'center',width: RFValue(12),resizeMode: 'contain',marginRight: 10 }}
/>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.name.toUpperCase()+" ("+item.topics.length+")"}
style={{ color: "#0C3C7F",alignSelf: 'center',fontWeight: '500',fontFamily:constants.fontFamily.SFProDisplay }}
/>
</View>
<View style={{ flex: 0.4}}>
<TouchableOpacity onPress={() => {
this.updateSelection(item)
}}>
{item.isExpanded ? <Image
source={constants.images.dropdownArrow}
style={{ alignSelf: 'flex-end',resizeMode: 'contain' }}
/> :
<Image
source={constants.images.arrowUp}
style={{ alignSelf: 'flex-end',resizeMode: 'contain' }}
/>
}
</TouchableOpacity>
</View>
</View>
</ShadowView>
{this.renderSubList(item)}
</View>
);
}
renderSubList = (item) => {
return <Collapsible collapsed={!item.isExpanded}>
<FlatList
data={item.topics}
scrollEnabled={false}
renderItem={({ item }) => (
<ShadowView style={item.isSelected? styles.topicShadowStyle_1:styles.topicShadowStyle}>
<View ref={ref => this.parentView = ref}
onLayout={(event) => {
this.find_dimesions(event.nativeEvent.layout) }}
style={[{flexDirection: 'row'},item.isSelected ? { borderColor: constants.colors.lightBlue,borderTopLeftRadius: 10,borderBottomLeftRadius: 10,borderRadius:8,borderWidth: 2 } : {}]}>
{(item.fullTextUrl!=null && item.fullTextUrl!='') || (item.pdfLink!=null && item.pdfLink!='') ?
<View style={{ width: width * 4 / 100,backgroundColor: constants.colors.lightBlue,borderTopLeftRadius: 8,borderBottomLeftRadius: 8 }}></View>:
<View style={{ width: width * 4 / 100,backgroundColor: constants.colors.lightGray_1,borderBottomLeftRadius: 8 }}></View>
}
<View style={{ width: '95%' }}>
<TouchableWithoutFeedback onLongPress={() => this.props.updateShowSelectedIcon(item)} onPress={() => this.props.showDetails(item)}>
<View style={{ flexDirection: 'row',width: '100%' }}>
<View style={{ flex: 1,marginHorizontal: width * 3 / 100,marginVertical: height * 1.5 / 100,backgroundColor: constants.colors.white }}>
<View style={{ flexDirection: 'row',width: '100%' }}>
<View style={{ alignContent: 'flex-start',width: '65%' }}>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.journal.toUpperCase()}
style={styles.jurnalTitle}
numberOfLines={2}
/>
</View>
<View style={{ alignContent: 'flex-end',width: '35%',}}>
<Text style={styles.dateStyle} >{item.date}</Text>
</View>
</View>
<View style={{ flexDirection: 'row',width: '100%',marginTop: height * 1 / 100 }}>
<View style={{ alignItems: 'flex-start',width: '70%' }}>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.article}
style={{ fontWeight: 'bold',color: constants.colors.black_1,alignContent: 'flex-start' }}
numberOfLines={2}
/>
</View>
{!this.props.showSelectedIcon?
<View
ref={(ref) => { this.rowRefs[item.id] = ref; }}
// ref={ref => this[`myView${item.id}`]=ref}
onLayout={(event) => {
const {x,y,width,height} =event.nativeEvent.layout
}}
style={{position:'relative',alignItems: 'flex-end',width: '30%' }}>
<TouchableOpacity style={{ height: RFValue(20),width: RFValue(20) }}
onPress={() => this.calculateIconPosition(item)}>
{(item.fullTextUrl!=null && item.fullTextUrl!='') || (item.pdfLink!=null && item.pdfLink!='') ?
<Image
source={constants.images.Oval}
style={{ height: RFValue(20),width: RFValue(20) }}
/>:
<Image
source={constants.images.dropdown}
style={{ height: RFValue(20),width: RFValue(20) }}
/>
}
</TouchableOpacity>
{/* { <View onLayout={(event) => {
const {x,height} =event.nativeEvent.layout
console.log(y)
}} > </View>} */}
</View>:
<View
style={{ alignItems: 'flex-end',width: '30%' }}>
{item.isSelected?
<Image
source={constants.images.selected}
style={{ height: RFValue(20),width: RFValue(20) }}
/>:
<Image
source={constants.images.unselect}
style={{ height: RFValue(20),width: RFValue(20) }}
/>
}
</View>
}
</View>
</View>
</View>
</TouchableWithoutFeedback>
{this.renderNotesView(item)}
</View>
</View>
</ShadowView>
)}
keyExtractor={item => item.id}
/>
</Collapsible>
}
项目测量方法调用
calculateIconPosition = (item) => {
this.rowRefs[item.id].measure( (fx,fy,height,px,py) => {
console.log("=================PY=====================")
console.log(py)
})
}
有什么方法可以在平面列表中获得准确的pageY位置。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。