React-Native 在推送通知上呈现页面

Question

我的 index.ios.js 响应推送通知。如果 phone 打开，我希望这会将用户发送到不同的页面。我不确定该怎么做。我正在使用 OneSignals 进行推送。

import React, { Component } from 'react';
import { ... } from 'react-native';

export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        // triggers on push
    }

    renderScene(route, navigator){ 
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

AppRegistry.registerComponent('Example', () => Example);

我试过的

我尝试更改状态然后重新呈现整个应用程序，该应用程序暂时可以运行但由于状态无法更新而将您锁定在该页面中。

forceRerender(route, navigator){
  return <BarberShow navigator={navigator}  />
}

render() {
  if(this.state.notification){
    return <Navigator initialRoute={{component: AppointmentShow}} renderScene={this.forceRerender.bind(this)}/>
  }else{
    return <Navigator initialRoute={{component: Login}} renderScene={this.renderScene.bind(this)} />
  }
}

Answer 1

你在哪里更改了代码中的状态？

我还建议您使用 'React-native-router-flux'，这是一个用于管理导航的好模块。

如果你使用那个：

import React, { Component } from 'react';
import { ... } from 'react-native';
import Actions from 'react-native-router-flux';

export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        // triggers on push
        Actions.customView({notification})
    }

    renderScene(route, navigator){ 
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

AppRegistry.registerComponent('Example', () => Example);

您可以轻松地将用户导航到任何 view/component 并将通知数据发送到该视图。

Answer 2

对于 React Native，我推荐使用 Ex-Navigation 你可以同时使用它（React Native 和 Exponent），它非常好用。

Answer 3

解决方案

您所要做的就是添加一个全局范围变量来跟踪导航器，以便 index.ios.js 可以访问它。

var _navigator;
export default class Example extends Component {
    componentWillMount() {
      OneSignal.addEventListener('received', this.onReceived);
    }

    onReceived(notification) {
        _navigator.push({
          component: NewPageHere
        });
    }

    renderScene(route, navigator){ 
      _navigator = navigator;
      return <route.component navigator={navigator} />
    }

    render() {
        return (
            <Navigator initialRoute={{component: Login}} 
            renderScene={this.renderScene.bind(this)} />
        )
    }   
}

React-Native 在推送通知上呈现页面

React-Native render a page on push notification

android

ios

reactjs

react-native

onesignal

我试过的

解决方案