Reactjs 按react native中的后退按钮时，从通知屏幕刷新上一屏幕

我是新来的。我有两个屏幕（1）。住宅（2）。通知 我正在从主页导航到通知屏幕。当我在通知屏幕上时，当我在那个条件下按下后退按钮时，我想刷新主屏幕。请建议

---

提前谢谢

您能给我们提供更多的细节吗？您是否使用类似react navigation的导航器？ 如果要从子组件触发父组件的方法，则应使用道具

因此，如果您自己管理视图，则可以执行以下操作：

export default class Wrapper extends Component
{
    state = {screen: 'Home'}

    useNewScreen = screenToUse => this.setState({screen: screenToUse})
    reloadHome = () => yourFunctionToRefreshThePage

    render = () =>
    {
        if (this.state.screen === 'Home')
            return (<Home goToNotif={() => this.useNewScreen('Notif')} />);
        else if (this.state.screen === 'Notif')
            return (<Notif onGoBack={() => this.reloadHome()} />);
    }
}

class Home extends Component
{
    render = () =>
    {
        return (
            <TouchableOpacity onPress={() => this.props.goToNotif()}/>
        );
    }
}
class Notif extends Component
{
    render = () =>
    {
        return (
            <TouchableOpacity onPress={() => this.props.onGoBack()}/>
        );
    }
}

当你想回去的时候，你可以调用这个方法

this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack(null);

---

我希望这足够清楚：）

首先，始终将导航键屏幕保存到任何

TempStore

。 其次，设置时间间隔，以观察和比较观察屏幕键和当前屏幕键，以便能够从您想要观看的屏幕调用插入的功能，并将屏幕模式插入功能事件

OnScreen.js

import React，{Component}来自'React'；
从“/helpers”导入{TempStore}；
进口{
文本，
看法
}来自“本土基地”；
类在屏幕上扩展组件{
建造师（道具）{
超级（道具）；
此.state={
lastValue:“活动”
}}
开始匹配=（）=>{
if（this.interval）{return；}
this.interval=setInterval（this.checkView，100）；
}
停止观看=（）=>{
this.interval=clearInterval（this.interval）；
}
componentDidMount（）{
这个。开始匹配（）；
}
组件将卸载（）{
这个。停止观看（）；
}
checkView=（）=>{
常量前列腺={}；
.currentRoute=TempStore（{type:'get'，name:'u currentRoute'}）
如果（！proState.currentRoute）{
proState.currentRoute={routeName:'Home'，key:'Home'}
}
如果（！this.props.statekey）{return false}
var是可见的；
if（this.props.statekey==proState.currentRoute.key）{
isVisible='active'
}否则{
isVisible='inactive'
}
//值更改时通知父级
if（this.state.lastValue！==isVisible）{
这是我的国家({
lastValue:isVisible
})
this.props.onChange（可见）；
}
}
渲染=（）=>{
返回(
);
}
}
在屏幕上导出默认值；

react导航App.js

。。。。。。。
常量AppNav=AppNavigator（AppNavigators）
函数getActiveRouteName（导航状态）{
如果（！navigationState）{
返回null；
}
const route=navigationState.routes[navigationState.index]；
//潜入嵌套的导航器
if（route.routes）{
返回getActiveRouteName（路由）；
}
返回路线；
}
导出默认值（）=>
{
TempStore（{type:'set'，name:'u currentRoute'，value:getActiveRouteName（currentState）}}/>
;

AnyScreenYouWishToWatch.js

从“../../../helper/OnScreen”导入屏幕上的内容；
......
ONACTIVETOGLE=（str）=>{
如果（str==='active'）{
警报（'active'）；}
否则{
警报（'inactive'）；}
}
.....

this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack(null);

 import React, { Component } from 'react';
    import { TempStore } from './helpers';
    import {
      Text,
      View
    } from "native-base";
    class OnScreen extends Component {
      constructor(props) {
        super(props);
        this.state = {
          lastValue:'active'
        }}

    startWatching=()=>{
        if (this.interval) { return; }
        this.interval = setInterval(this.checkView, 100);
      }

    stopWatching=()=>{
        this.interval = clearInterval(this.interval);
      }

      componentDidMount(){
          this.startWatching();
      }
        componentWillUnmount(){
        this.stopWatching();
      }
    checkView =()=> {
        const proState = {};

          proState.currentRoute=TempStore({type:'get',name:'_currentRoute'})

          if(!proState.currentRoute){
            proState.currentRoute={routeName:'Home',key:'Home'}
          }

        if(!this.props.statekey){return false}

     var isVisible;

     if(this.props.statekey === proState.currentRoute.key){
       isVisible='active'
     }else{
       isVisible='inactive'
     }

        // notify the parent when the value changes
        if (this.state.lastValue !== isVisible) {
          this.setState({
            lastValue: isVisible
          })
          this.props.onChange(isVisible);
        }
      }

    render = () => {
        return (
          <View></View>
        );
      }
    }
    export default OnScreen;

.......
const AppNav = AppNavigator(AppNavigators)

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route;
}

export default () =>
  <Root>
    <AppNav onNavigationStateChange={(prevState, currentState) => {
      TempStore({type:'set',name:'_currentRoute',value:getActiveRouteName(currentState)})}}/>
  </Root>;

import OnScreen from '../../../helper/OnScreen';
    ......
    OnActiveToggle=(str)=> {
      if(str==='active'){
        alert('active');}
      else{
        alert('inactive');}
    }
    .....


    <OnScreen statekey={this.props.navigation.state.key} onChange={this.OnActiveToggle}/>