实现深层链接 url 导致反应原生应用程序无法打开 android答案

【问题标题】：Implementing Deep link url cause react native app fail to open android实现深层链接 url 导致反应原生应用程序无法打开 android
【发布时间】：2020-07-03 04:09:20
【问题描述】：

我正在尝试实现到我的 react 本机应用程序的深层链接。问题是当我的应用处于后台时尝试打开链接时出现错误错误是

undefined 不是一个对象（评估 '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 正确打开列表路由。如果在没有深层链接 url 的情况下正常打开，这也可以正常工作。但是当应用程序在后台时出现错误，它无法执行this.props.actions.openListingDetail(data[1], null) 错误信息

undefined 不是一个对象（评估 'this.props'）

android:launchMode="singleTask"

知道有什么问题吗？

【问题讨论】：

标签： javascript android react-native react-router deep-linking

【解决方案1】：

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

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

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

希望这会有所帮助。

【讨论】：