我希望在单独的屏幕（不是带有按钮的屏幕）上按下按钮后能够收到警报。我该怎么做呢？答案

【问题标题】：I want to be able to receive an alert after pressing a button on a separate screen (not the screen with the button). How might I go about doing this?我希望在单独的屏幕（不是带有按钮的屏幕）上按下按钮后能够收到警报。我该怎么做呢？
【发布时间】：2021-12-16 13:25:10
【问题描述】：

REACT 原生应用开发

假设在屏幕 A 上我有一个按钮。我希望能够按下该按钮并在屏幕 B 上显示警报。

在此屏幕 B 上，我希望警报更像是一个通知，它会一直停留在那里，直到用户单击警报/通知来完成任务。

    const taskedClick = () => {
        Alert.alert('I am the ALERT'); //I WANT THIS ALERT TO SHOW ON MY NOTIFICATION SCREEN AS A NOTIFICATION 
    }
return (
        <View> 
             <Button onPress={taskedClick}
             style={styles.leftButton}
             type="solid"
             title={post.leftUser.leftButton}
             />
        </View>

上面的代码有一个带有工作警报的工作按钮，但警报出现在按钮可见的屏幕上。这是主屏幕。我有一个通知屏幕，我希望警报通知用户单击了按钮。

我使用 Stack.Navigator 和 Stack.Screen 作为我的屏幕名称。

【问题讨论】：

标签： react-native react-button

【解决方案1】：

应该可以，希望对你有帮助:)

您需要一种方法来跟踪屏幕之间的状态。这样你就知道在屏幕 B 中，在屏幕 A 中按下了按钮。只需使用 React 的 useContext 即可。 (https://dmitripavlutin.com/react-context-and-usecontext/)

创建一个名为 DataLayer.js 的文件

import React from "react";
const DataLayerContext = React.createContext();

const DataLayerProvider = (props) => {
  const [showAlertInScreenB, setShowAlertInScreenB] = React.useState(false);
  return (
      <DataLayerContext.Provider value={{
          showAlertInScreenB, setShowAlertInScreenB
       }}
       >
      </DataLayerContext.Provider>
      )
  }

export { DataLayerProvider, DataLayerContext }

下一步您需要在单击按钮时将屏幕 A 中的 showAlertInScreenB 设置为 true。所以在屏幕 A 中执行此操作。

 import { DataLayerContext } from "./DataLayer"; 

 const ScreenA = (props)=>{ 
     const DATA_LAYER = React.useContext(DataLayerContext)
     const taskedClick = () => {
             DATA_LAYER.setShowAlertInScreenB(true);
      }
return (
    <View> 
         <Button onPress={taskedClick}
         style={styles.leftButton}
         type="solid"
         title={post.leftUser.leftButton}
         />
    </View>
  }

最后，每当您进入屏幕 A 时，您都会有条件地显示警报基于数据层中的值 showAlertInScreenB

   import { DataLayerContext } from "./DataLayer";
   const ScreenA = (props)=>{ 
   const DATA_LAYER = React.useContext(DataLayerContext)
   if (DATA_LAYER.showAlertInScreenB===true){
        Alert.alert(
        "Alert Title",
     "My Alert Msg",
       [
       {
      text: "Cancel",
      onPress: () => {DATA_LAYER.setShowAlertInScreenB(false)},
      style: "cancel"
    },
    { text: "OK", onPress: () =>{DATA_LAYER.setShowAlertInScreenB(false) }
  ]
      );
       
    }
   }

【讨论】：

对于您提供的代码的第三部分，我应该将其添加到 screenB 吗？我将它添加到屏幕 B 并弹出警报，但它似乎没有连接到屏幕 A 上的按钮。
只要 showAlertInScreenB 的值为真，它就应该在屏幕 B 中显示警报，因此，如果当您在屏幕 A 中按下按钮时，它使该值变为真，则应该连接。还是我错过了什么？为什么好像连接不上？