代码:
import React, { useState, useEffect } from "react";
import {
View,
StyleSheet,
Text,
Modal
from 'react-native';
import { SimpleLineIcons, Feather } from "@expo/vector-icons";
import { FlatList } from "react-native-gesture-handler";
import Menu, { MenuItem, MenuDivider } from "react-native-material-menu";
const NotificationScreen = ({ navigation }) => {
const [serialModalVisible, setSerialModalVisible] = useState(false);
const filterSerial = () => {
setSerialModalVisible(!serialModalVisible);
};
useEffect(() => {
navigation.setParams({
filterSerial
});
}, []);
useEffect(() => {
console.log("serial modal changed: " + serialModalVisible);
}, [serialModalVisible]);
return (
<View>
<Modal
animationType='fade'
transparent={true}
visible={serialModalVisible}>
<View style={styles.serialModalView}>
<TouchableOpacity
onPress={() => {
setSerialModalVisible(false);
}}>
<Text style={styles.serialModal}>Close Modal</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
};
NotificationScreen.navigationOptions = ({ navigation }) => {
return {
headerLeft: () => (
<View style={styles.menuView}>
<Menu
ref={navigation.getParam("setMenuRef")}
button={
<TouchableOpacity onPress={navigation.getParam("showMenu")}>
<Feather name='filter' size={30} style={styles.menuIconLeft} />
</TouchableOpacity>
}>
<MenuItem onPress={navigation.getParam("filter24Hours")}>
Filter Last 24 Hours
</MenuItem>
<MenuItem onPress={navigation.getParam("filterSerial")}>
Filter By Serial Number
</MenuItem>
<MenuItem onPress={navigation.getParam("clearFilters")}>
Clear Filters
</MenuItem>
</Menu>
</View>
),
headerTitle: "Notifications",
headerTitleStyle: { color: "white", letterSpacing: 2 },
headerTransparent: true
};
};
export default NotificationScreen;
我不知道问题出在哪里,当我从菜单下拉菜单中选择过滤器序列时,模态不会出现。控制台声明说,在选择过滤器序列之后,它是正确的。
我怀疑这与navigationOptions没有获得正确的值有关,或者是React Native的菜鸟,我不确定这是如何工作的。我检查了许多数据表。
任何指导表示赞赏。