更改带有钩子的React Native中的navigationOptions中的可见性

时间:2020-04-16 23:40:21

标签: react-native

代码:

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的菜鸟,我不确定这是如何工作的。我检查了许多数据表。

任何指导表示赞赏。

0 个答案:

没有答案