平面列表不滾動反應本機

Question

出於某種原因，我的平面列表沒有滾動，我不確定為什么。 希望得到任何提示：這是平面列表的代碼：

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>
        );
}

太感謝了！

Answer 1

直接在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",
  },
});