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

Question

反应原生应用程序开发

假设在 Screen AI 上有一个按钮。我希望能够按下该按钮并在屏幕 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 作为我的屏幕名称。

Answer 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 }

Next 您需要在单击按钮时将屏幕 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) }
  ]
      );
       
    }
   }