如何在JavaScript/React中通过package name打开Android应用

场景1：基于React Native开发安卓原生应用 #

如果你的React应用是安卓端原生应用（基于React Native开发），可以按以下方案实现：

• 安装第三方原生能力库react-native-launch-other-app，执行安装命令：

npm install react-native-launch-other-app --save

• 安卓权限配置：在项目android/app/src/main/AndroidManifest.xml中添加包可见性声明，安卓11及以上系统必须配置该权限才能识别设备上已安装的应用：

<queries>
  <!-- 按需添加你需要启动的应用包名 -->
  <package android:name="com.example.targetapp" />
  <!-- 如果需要支持启动任意应用，可添加以下权限，注意上架应用商店可能会被限制 -->
  <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
</queries>

• 代码中调用启动方法：

import LaunchApp from 'react-native-launch-other-app';

// 替换原来的OpenApp组件调用
<button onClick={() => {
  LaunchApp.openApp(
    app, // 目标应用包名
    {},
    (res) => {console.log('启动成功', res)},
    (err) => {console.log('启动失败，应用未安装或无权限', err)}
  )
}}>{app}</button>

场景2：开发Web端React应用（运行在安卓浏览器/WebView中） #

如果你的应用是纯Web应用，运行在安卓系统的浏览器或者WebView里，无法直接调用系统能力读取应用列表，需要构造安卓系统支持的Intent链接实现启动：

• 构造格式为intent://#Intent;package=目标应用包名;scheme=launch;end的链接，点击跳转该链接即可触发系统启动对应包名的应用
• 修改后的代码示例：

class CheckList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      apps: [],
    };
  }
  
  addApp() {
    if (this.state.inputValue!=='') {
      this.setState({
        apps: this.state.apps.concat(this.state.inputValue),
        inputValue: ''
      });
    }
  }
  removeApp(app) {
    this.setState({
      apps: this.state.apps.filter((item) => item !== app)
    });
  }
  updateInputValue(evt) {
    this.setState({inputValue: evt.target.value});
  }
  // 新增启动应用方法
  launchApp(packageName) {
    const intentUrl = `intent://#Intent;package=${packageName};scheme=launch;end`;
    window.location.href = intentUrl;
  }

  render() {
    const apps = this.state.apps;
    const applaunch = apps.map((app) => {
      return (
        <li key={app}>
          <button onClick={() => this.removeApp(app)}>-</button>
          <button onClick={() => this.launchApp(app)}>{app}</button>
        </li>
      );
    });
    
    return (
      <div className="checklist">
        <ul>
          {applaunch}
          <li>
            <button onClick={() => this.addApp()}>+</button>
            <input value={this.state.inputValue} onChange={evt => this.updateInputValue(evt)} placeholder="输入应用包名"/>
          </li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<CheckList />, document.getElementById("root"));

注意事项 #

• Web场景下如果目标应用未安装，浏览器会跳转空白页或者错误页，你可以在Intent链接中添加S.browser_fallback_url=跳转地址参数，指定未安装时的 fallback 地址
• 部分定制安卓ROM会限制浏览器直接启动第三方应用，需要用户手动授予浏览器启动其他应用的权限
• 原来使用的react-open-app库仅支持标准Deep Link跳转，不支持直接传入包名启动应用，无需继续使用

内容的提问来源于stack exchange，提问作者Nishyda