[英]React Native nested Flatlist (horizontal flatlist inside vertical flatlist)
[英]Flatlist not scrolling react native
出于某种原因,我的平面列表没有滚动,我不确定为什么。 希望得到任何提示:这是平面列表的代码:
return (
<Layout>
<View style={styles.header}>
<Text size="h1">Explore</Text>
</View>
<FlatList contentContainerStyle={styles.cards} data={events} renderItem={({item}) =>
<EventCard event={item} keyExtractor={event => event.id} click={() => {
navigation.navigate("FullCard", {
event: item
});
}}/>
} />
</Layout>
);
}
const styles = StyleSheet.create({
header: {
padding: 10,
display: "flex",
marginBottom: 10
},
cards: {
alignItems: "center",
height: Dimensions.get('window').height/1.2
},
});
这是导入平面列表的主页:
export default function ({ navigation }) {
return (
<NavigationContainer independent={true}>
<Stack.Navigator initialRouteName="Explore">
<Stack.Screen name="Explore" options={{headerShown: false}}>
{props => <Explore {...props}/>}
</Stack.Screen>
<Stack.Screen name="FullCard" options={{headerShown: false}}>
{props => <FullCard {...props}/>}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
太感谢了!
直接在Stack.Screen
中给你组件, props
会自动访问你的屏幕。
export default function ({ navigation }) {
return (
<NavigationContainer independent={true}>
<Stack.Navigator initialRouteName="Explore">
<Stack.Screen name="Explore" options={{headerShown: false}} component={Explore}/>
<Stack.Screen name="FullCard" options={{headerShown: false}} component={FullCard}/>
</Stack.Navigator>
</NavigationContainer>
);
}
FlatList contentContainerStyle
样式应如下所示
const styles = StyleSheet.create({
header: {
padding: 10,
display: "flex",
marginBottom: 10
},
cards: {
flex:1,
alignItems: "center",
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.