react-native - 如何使用相同的数据连接 2 个不同的平面列表?
问题描述
当我滚动更大的图像时,我试图实现,较小的图像上的绿色边框将转到下一个。为此,我有 2 个不同的平面列表。item.key
尝试使用 onMomentumScrollEnd写入状态,但没有成功。这是我的
<FlatList
data={this.state.productImage}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={item => { this.setState({ active: item.key });
console.log(item.key) }}
renderItem={({ item }) =>
<View>
<Image source={item.source} style={{ width:
Dimensions.get('window').width, height:
Dimensions.get('window').height / 2 }} />
</View>}
keyExtractor={item => item.key}
/>
<FlatList
data={this.state.productImage}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ flexDirection: "row", alignItems: "center",
marginHorizontal: theme.SIZE.pageMargin, marginVertical: 20 }}
renderItem={({ item }) =>
<TouchableOpacity >
<Image source={item.source} style={[this.state.active === item.key
&& styles.activeImage, styles.productImages]} />
</TouchableOpacity>}
keyExtractor={item => item.key}
/>
编辑:在与这个斗争之后,我已经解决了
onMomentumScrollEnd={(event) => {
let xPosition = Math.round(event.nativeEvent.contentOffset.x)
let imageWidth = Math.round(Dimensions.get('window').width)
let keyOfShownImg = (Math.round((xPosition + imageWidth) / imageWidth))
this.setState({ active: keyOfShownImg })
}}
解决方案
实际上,您几乎得到了解决方案。在这里,您可以使用onViewableItemChanged道具来实现这一点。
我尝试了解决方案。看看这里
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
visibleIndex: 0,
data: [
'https://homepages.cae.wisc.edu/~ece533/images/airplane.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png',
],
};
this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this);
}
renderBigList = ({ item, index }) => {
return (
<Image
style={{ width: 300, height: 300, resizeMode: 'contain' }}
source={{ uri: item }}
/>
);
};
renderSmallList = ({ item, index }) => {
return (
<View
style={{
borderColor:
index === this.state.visibleIndex ? 'green' : 'transparent',
borderRadius: 10,
borderWidth: 2,
margin: 3,
}}>
<Image
style={{ width: 100, height: 100, resizeMode: 'contain' }}
source={{ uri: item }}
/>
</View>
);
};
onViewableItemsChanged = (viewableItemData, changed) => {
//console.log(viewableItemData);
if (viewableItemData.viewableItems.length) {
let keyOfVisibleItem = viewableItemData.viewableItems[0].index;
console.log(keyOfVisibleItem);
this.smallListRef.scrollToIndex({
index: keyOfVisibleItem,
animated: true,
});
this.setState({ visibleIndex: keyOfVisibleItem });
}
};
render() {
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item, index) => '' + index}
style={{ height: '50%' }}
data={this.state.data}
extraData={this.state}
renderItem={this.renderBigList}
horizontal={true}
onViewableItemsChanged={this.onViewableItemsChanged}
viewabilityConfig={{
itemVisiblePercentThreshold: 90,
}}
showsHorizontalScrollIndicator={false}
/>
<FlatList
ref={ref => (this.smallListRef = ref)}
keyExtractor={(item, index) => '' + item}
style={{ height: 50 }}
data={this.state.data}
extraData={this.state}
renderItem={this.renderSmallList}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
padding: 8,
backgroundColor: 'white',
},
});
推荐阅读
- flutter - 热重载在特定文件中不起作用 - Flutter
- php - 如何打印多行 JSON 结果?
- c# - 防止 Visual Studio 将图像序列化为 resx 文件
- javascript - 不和谐.js | 检测消息是否包含表情符号
- python - 如何从格式为 4/23/20 的 pandas data_frame 中提取日期和月份?
- flask - 用于测验的烧瓶计时器
- opencv - 网络摄像头视频源的openCV问题
- function - 在批处理文件中执行重复任务的最有效方法是什么?
- javascript - 使用锚标签将电子重定向到浏览器
- fault-tolerance - 如何确定 filex 的最佳容错内存?