如何在带有弹出窗口、useState 和 Pressables 的 React-Native 应用程序中修复此错误

Question

我的项目已暂停几个小时，因为可压物体没有做任何事情！ （这是反应本机项目） 我似乎找不到解决方案，因为每次我接近找到解决方案时，它们都会导致更多错误。希望你们能帮助我。谢谢。

这里是profile.js

import { View, Text, StyleSheet, Pressable } from "react-native";
import PopUp from "./PopUp.js"
import Box from "./Box";
import { useState } from "react";

const ProfileScreen = () => {
   const [visible, setVisible] = useState()

  function PopUpScreen() {
    visible = styles.popup.display
    setVisible(prevVisible => !prevVisible);
  }

  return (
    <View style={styles.container}>
       <Text style={styles.text}>SIGNUP</Text>
      <Pressable style={styles.button} onPress={PopUpScreen}>
        <Text onPress={PopUpScreen} style={styles.text2}>🔔</Text>
        <Text onPress={PopUpScreen} style={styles.text4}>🔴</Text>
        <Text onPress={PopUpScreen} style={styles.text3}>3</Text>
      </Pressable>
      <PopUp style={styles.popup}>
        <Box></Box>
        <Box></Box>
        <Box></Box>
        <Box></Box>
        <Box></Box>
      </PopUp>


    </View>

  );
};



export default ProfileScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",

  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 16,
  },
  text3: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 44,

  },
  text2: {
    fontSize: 24,
    fontWeight: "bold",
    position: 'absolute',
    top: 20,
    right: 30,
  },
  text4: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 37,
  },
  button: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 40,
  },
  popup: {
    backgroundColor: "#C0C0C0",
    padding: 20,
    width: 300,
    height: 400,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: "black",
    margin: 2,
    elevation: 5,
    position: "absolute",
    zIndex: 1,
    fontSize: 24,
    display: "none"
  },
  text5: {
    fontSize: 24,
    textAlign: "center",
    alignSelf: "center",
    fontWeight: "bold",
    marginBottom: 16,
  },
});

这是盒子

import { View, Text, StyleSheet } from "react-native";

export default function Box({ children, style }) {
  return (
    <View style={[styles.box, style]}>
      <Text style={styles.text}>{children}</Text>
      <Text style={styles.text3}>➤</Text>
    </View>
  );
}


const styles = StyleSheet.create({
  box: {
    backgroundColor: "#C0C0C0",
    padding: 20,
    width: 350,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: "black",
    margin: 2
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "left",
    color: "white",
  },
  text3: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "right",
    color: "white",
  },
});

这是弹出窗口

import { View, Text, StyleSheet } from "react-native";

export default function PopUp({ children, style }) {
    return (
      <View style={[styles.box, style]}>
        <Text style={styles.text}>{children}</Text>
      </View>
    );
  }

const styles = StyleSheet.create({
    box: {
      backgroundColor: "#C0C0C0",
      padding: 20,
      width: 350,
      borderWidth: 1,
      borderStyle: "solid",
      borderColor: "black",
      margin: 2
    },
})

这是app.js

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import SettingsScreen from "./screens/SettingsScreen";
import CourseListScreen from "./screens/CourseList";
import ProfileScreen from "./screens/Profile";
import Ionicons from "@expo/vector-icons/Ionicons";
import { AboutStack } from "./AppStack";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          //   tabBarShowLabel: false,
          tabBarLabelPosition: "below-icon",
          tabBarActiveTintColor: "purple",
        }}
      >
        <Tab.Screen name="Course List" component={CourseListScreen} />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarLabel: "My Profile",
            tabBarIcon: () => <Ionicons name={"person"} size={20} />,
            tabBarBadge: 3,
          }}
        />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen
          name="About Stack"
          component={AboutStack}
          options={{
            headerShown: false,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

您无法看到任何更新，因为您正在改变状态 用这条线

可见= styles.popup.display

import { View, Text, StyleSheet, Pressable } from "react-native";
import PopUp from "./PopUp.js"
import Box from "./Box";
import { useState } from "react";

const ProfileScreen = () => {
   const [visible, setVisible] = useState()

  function PopUpScreen() {
    // removed the mutation
    setVisible(prevVisible => !prevVisible);
  }

  return (
    <View style={styles.container}>
       <Text style={styles.text}>SIGNUP</Text>
      <Pressable style={styles.button} onPress={PopUpScreen}>
        <Text onPress={PopUpScreen} style={styles.text2}>🔔</Text>
        <Text onPress={PopUpScreen} style={styles.text4}>🔴</Text>
        <Text onPress={PopUpScreen} style={styles.text3}>3</Text>
      </Pressable>
      <PopUp style={styles.popup}>
        <Box></Box>
        <Box></Box>
        <Box></Box>
        <Box></Box>
        <Box></Box>
      </PopUp>


    </View>

  );
};



export default ProfileScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",

  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 16,
  },
  text3: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 44,

  },
  text2: {
    fontSize: 24,
    fontWeight: "bold",
    position: 'absolute',
    top: 20,
    right: 30,
  },
  text4: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 37,
  },
  button: {
    fontSize: 20,
    fontWeight: "bold",
    position: 'absolute',
    top: 15,
    right: 40,
  },
  popup: {
    backgroundColor: "#C0C0C0",
    padding: 20,
    width: 300,
    height: 400,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: "black",
    margin: 2,
    elevation: 5,
    position: "absolute",
    zIndex: 1,
    fontSize: 24,
    display: "none"
  },
  text5: {
    fontSize: 24,
    textAlign: "center",
    alignSelf: "center",
    fontWeight: "bold",
    marginBottom: 16,
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>