react-native - 具有 3 张卡片分页布局的 React-Native FlatList
问题描述
在这个小吃中,我试图在屏幕中央放置 3 张卡片,并带有一个水平 FlatList 并启用分页以跳转到滚动时的下 3 张卡片。
但是布局在滚动后开始被破坏,并且下一张/上一张卡片的一些像素出现在视图中。
我应该如何设置此列表的样式,使其始终在屏幕中央恰好有 3 张卡片,并且滚动将跳转到带有下 3 张卡片的下一页?或者像 GooglePlay 商店一样,前一张/下一张卡片的固定像素在主 3 张卡片的左侧和右侧可见。(下面的示例截图)
<View style={{flex:1,justifyContent: 'center', marginLeft: 5, marginRight: 5,}}>
<FlatList
horizontal
pagingEnabled
data={data}
keyExtractor={(item) => `ìtem-${item}`}
renderItem={({ item }) => (
<Card style={{width:Dimensions.get("window").width/3-5,marginRight:5}}>
{/* some content */}
</Card>
)}
/>
</View>
我不需要像snap-carousel
这样的图书馆......
解决方案
使用 Scrollview 道具snapToOffsets来实现。
像谷歌播放示例(一一)尝试小吃。
你的例子(三乘三)尝试小吃。
如何使用 snapToOffsets?
const snapToOffsetsLikeGooglePlay = data.map((x, i) => {
return ((i * itemWidth) + startScroll)
})
const snapToOffsetsLikeYourExample = data.map((x, i) => {
return ((i * (itemWidth) * previewCount) + startScroll)
})
//see the example below to know
//what is `startScroll` and `previewCount` mean?
//and how to calculate `itemWidth`?
这里是完整的例子
import React from 'react';
import {FlatList, Text} from 'react-native';
import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
//you need to preview n items.
const previewCount = 3;
//to center items
//the screen will show `previewCount` + 1/4 firstItemWidth + 1/4 lastItemWidth
//so for example if previewCount = 3
//itemWidth will be =>>> itemWidth = screenWidth / (3 + 1/4 + 1/4)
const itemWidth = width/(previewCount + .5);
//to center items you start from 3/4 firstItemWidth
const startScroll = (itemWidth * 3/4);
const App = () => {
const data = [...Array(24).keys()];
const flatlistRef = React.useRef();
React.useEffect(() => {
if (flatlistRef.current) flatlistRef.current.scrollToOffset({
offset:startScroll, animated: false
});
}, [flatlistRef]);
const snapToOffsetsLikeGooglePlay = data.map((x, i) => {
return ((i * itemWidth) + startScroll)
})
const snapToOffsets = data.map((x, i) => {
return ((i * (itemWidth) * previewCount) + startScroll)
})
return (
<FlatList
ref={flatlistRef}
style={styles.container}
pagingEnabled={true}
horizontal= {true}
decelerationRate={0}
snapToOffsets={snapToOffsets}
snapToAlignment={"center"}
data={data}
renderItem={({item, index}) => (
<View style={styles.view} >
<Text style={styles.text}>{index}</Text>
</View>
)}/>
);
}
export default App;
const styles = StyleSheet.create({
container: {
},
view: {
marginTop: 100,
backgroundColor: '#eee',
width: itemWidth - 20, //20 is margin left and right
margin: 10,
height: 140,
borderRadius: 10,
justifyContent : 'center',
alignItems : 'center',
},
text : {
fontSize : 60,
fontWeight : 'bold',
color : '#aaa',
},
});
更新:@Amir-Mousavi 评论从零开始
一一尝试零食
1-)评论useEffect。
2-) 设置const startScroll = (itemWidth * 3/4)
三个三个尝试零食
1-) 评论 useEffect。
2-) 设置const startScroll = (itemWidth * 2.75)
推荐阅读
- spring - Spring Boot 2.3.8 TomcatServletWebServerFactory JAR
- docusaurus - Docusaurus 可以读取文件夹中的所有文件吗?
- events - 如何查看会员是否有默认头像?
- powerbi - DAX - 查找完整的缺货订单
- udeploy - 有什么方法可以在 UrbanCode uDeploy 中使用 CLI 或 REST api 获取应用程序进程中的版本
- android - querySkuDetailsAsync 查询的数据库在哪里?
- node.js - 我无法登录到我的数据库 mssql 节点 js + docker
- python-3.x - 由于 windows10 上的 ssl 验证,为 Python3.8 安装 boto3 失败
- python - docker build 中的 node-gyp 错误,如何在 docker 化我的 testcafe 项目时在 dockerfile 中安装 Python?
- java - 刚开始学习的 Java 子字符串