在react-native中按回按钮时,从通知屏幕刷新上一个屏幕

时间:2017-11-09 15:51:50

标签: reactjs react-native

我是反应原生世界的新手。我有两个屏幕1)。家2)。通知 我正在从主页导航到通知屏幕。当我在通知屏幕上那个时候我按下那个条件的按钮我要刷新主屏幕。请建议。

提前致谢!

2 个答案:

答案 0 :(得分:2)

你能告诉我们一些细节吗?您使用反应导航这样的导航器吗? 如果要从子组件触发父组件的方法,则应使用props。

所以,如果你自己管理你的观点,你可以做这样的事情:

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.navigate('Notif', {
    onGoBack: () => this.refresh()
});

当你想回去时,你可以调用这个方法

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

我希望这很清楚:)

答案 1 :(得分:1)

首先,始终将导航键屏幕保存到任何Get-ADUser -Filter "(sn -like '$($UserWzor.Surname)*') -and (GivenName -eq '$($UserWzor.GivenName)')" -Server $DC | ForEach-Object { $_.sn = $_.sn -replace '[ ]*\d+$' } | Where-Object -FilterScript { ($_.sAMAccountName -ne $UserAD.sAMAccountName) -and ($_.sn -eq $UserWzor.Surname) } 。  其次,设置时间间隔以观看并比较观看屏幕键和当前屏幕键,以便能够从您想要的屏幕中调用插入的功能,并将屏幕模式插入功能事件。

  

OnScreen.js

TempStore
  

反应导航App.js

 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;
  

AnyScreenYouWishToWatch.js

.......
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>;