实施 Deep link url 导致 React 本机应用程序无法打开 android

Question

我正在尝试对我的 React 本机应用实施深度 link。问题是当我的应用程序处于后台时尝试打开 link 时出现错误错误是

undefined is not an object (evaluating 'this.props')

如果我的应用程序不在后台（应用程序不是运行），它工作正常

我的初始路由是应用程序在重定向到特定路由之前显示大约 2.5 秒的初始屏幕，具体取决于用户是否登录，如果用户登录则它将重定向到主路由，否则重定向到登录路由。

这是我的应用程序路线

function mapStateToProps (state) {
  return {
    deviceVersion: state.device.version,
    auth: {
      form: {
        isFetching: state.auth.form.isFetching
      }
    },
    global: state.global,
    search: state.search
  }
}


function mapDispatchToProps (dispatch) {
  return {
    actions: bindActionCreators({ ...authActions, ...deviceActions, ...globalActions, ...searchActions }, dispatch)
  }
}

var reactMixin = require('react-mixin')
import TimerMixin from 'react-timer-mixin'

我的componentDidMount函数

componentDidMount () {
            this.setTimeout(
                    () => {
                      this.props.actions.getSessionToken()
                      this.props.actions.setHeight(height)
                      this.props.actions.getIp()
                      this.props.actions.getUniqueId()
                      this.props.actions.getLanguage()
                    },
                    2500
                )

渲染函数

render () {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor="#b33939"
        />
        <View style={{flex:1}}>
        <Header isFetching={this.props.auth.form.isFetching}
          showState={this.props.global.showState}
          currentState={this.props.global.currentState}
          onGetState={this.props.actions.getState}
          onSetState={this.props.actions.setState} />
        </View>

        <View style={{flex:1}}>
          <Text style={styles.summary}>Welcome</Text>
        </View>

      </View>
    )
  }
}

reactMixin(App.prototype, TimerMixin)

export default connect(mapStateToProps, mapDispatchToProps)(App)

当我实现 Deeplink 时，我将 Linking Listener 添加到我的 componentDidMount 函数来处理 url，并且我将超时内的一些操作移动到 handleOpenURL 函数

componentDidMount () {
    Linking.getInitialURL()
            .then(url => this.handleOpenURL({ url }))
            .catch(console.error);

    Linking.addEventListener('url', this.handleOpenURL);
  }

handleOpenURL 函数如下所示

handleOpenURL(event) {
    console.log('URL', event)

    if(!_.isNull(event.url))
    {
      var url = event.url
      var removeDomain = url.replace("https://www.example.com/", "")
      console.log(removeDomain)
      var lastChar = removeDomain[removeDomain.length -1];
      if(lastChar != '/')
      {
        var data = removeDomain.split("/")
        if(data[0] == 'listing')
        {
          this.props.actions.openListingDetail(data[1], null)
        }
        
      }
    }else{
      this.setTimeout(
            () => {
              this.props.actions.getSessionToken()
              this.props.actions.setHeight(height)
              this.props.actions.getIpAdd()
              this.props.actions.getUniqueId()
              this.props.actions.getLanguage()
            },
            2500
        )
    }
  }

getSessionToken函数是检查用户是否登录。我正在使用反应路由器通量

如果该应用当前不是运行，则此方法可以正常工作。 Url 正确打开列表路由。如果没有 deep link url 正常打开，这也可以正常工作。但是当应用程序在后台运行时出现错误，它无法执行 this.props.actions.openListingDetail(data[1], null) 错误信息

undefined is not an object (evaluating 'this.props')

android:launchMode="singleTask"

知道有什么问题吗？

Answer 1

您似乎将方法作为静态函数传递给 addEventListener。你可以试试这个：

componentDidMount () {
  Linking.getInitialURL()
    .then(url => this.handleOpenURL({ url }))
    .catch(console.error);

  Linking.addEventListener('url', () => this.handleOpenURL());
}

希望对您有所帮助。

实施 Deep link url 导致 React 本机应用程序无法打开 android

Implementing Deep link url cause react native app fail to open android

javascript

android

react-native

react-router

deep-linking