Expo大作戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流

来源:https://www.cnblogs.com/gdsblog/archive/2018/03/10/8541866.html
-Advertisement-
Play Games

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，將全部來與官網 我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...


簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，將全部來與官網

我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732981

【之前我寫過一些列關於expo和rn入門配置的東i西，大家可以點擊這裡查看：從零學習rn開發】

相關文章：

Expo大作戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用

Expo大作戰(二)--expo的生命周期，expo社區交流方式，expo學習必備資源，開發使用expo時關註的一些問題

Expo大作戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo，expo的局限性，開發時項目選型註意點等

Expo大作戰(四)--快速用expo構建一個app，expo中的關鍵術語

Expo大作戰(五)--expo中app.json 文件的配置信息

Expo大作戰(六)--expo開發模式，expo中exp命令行工具，expo中如何查看日誌log，expo中的調試方式

Expo大作戰(七)--expo如何使用Genymotion模擬器

Expo大作戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流

更多>>

接下來就開始擼碼

發佈應用程式


在開發項目時，您需要在電腦上編寫代碼，而當您使用XDE或exp時，伺服器和React Native打包程式將在您的電腦上運行，​​並捆綁所有源代碼並使其可通過URL 分享。您正在處理的項目的URL可能如下所示：exp：//i3-kvb.ccheever.an-example.exp.direct：80

exp.direct是我們用於隧道的域，所以即使您位於VPN或防火牆之後，具有您的URL的互聯網上的任何設備都應該能夠訪問您的項目。這使得在您的手機上打開您的項目或將其發送給與您合作的其他人不在同一區域網中更容易。

但是，由於打包程式和伺服器在您的電腦上運行，​​如果您關閉筆記本電腦或關閉XDE，則無法從該URL載入項目。 “發佈”是我們用於部署項目的術語。它使您的項目可以使用持久URL，例如https://expo.io/@community/native-component-list，可以通過expo客戶端打開。它還會將您的所有應用圖片，字體和視頻上傳到CDN（詳情請閱讀此處）。

如何發佈


要發佈項目，請單擊XDE中的發佈按鈕。 （它位於視窗的右上角。）如果您正在使用exp cli工具，請運行exp publish。不需要設置，繼續創建一個新項目併發布它，而不需要做任何改變，你會發現它的工作原理。

當你這樣做的時候，包裝者(packager) 會縮小你的所有代碼，並生成你的代碼的兩個版本（一個用於iOS，一個用於Android），然後將它們上傳到CDN。你會得到一個像https://exp.host/@ccheever/an-example這樣的鏈接，任何人都可以從中載入你的項目。

無論何時您想要部署更新，都可以再次點擊發佈，併在用戶下次打開新版本時立即向用戶提供新版本。[完美]

部署到App Store和Play商店


當您準備將應用分發給最終用戶時，您可以創建獨立應用二進位文件（ipa或apk文件）並將其放入iOS應用商店和Google Play商店。請參閱分發您的應用程式。

獨立應用程式知道要在應用程式發佈的網址上查找更新，如果您發佈更新，那麼下次用戶打開應用程式時，它們將自動下載新版本。這些通常被稱為“空中下載”（OTA）更新，其功能類似於CodePush，但它內置於Expo中，因此您無需安裝任何設備。

要配置應用程式處理JS更新的方式，請參閱離線支持。

限制


如果您在app.json中進行了以下任何更改，則需要重新構建應用程式的二進位文件以使更改生效：

  • Increment the Expo SDK Version

  • Change anything under the ios or android keys

  • Change your app splash

  • Change your app icon

  • Change your app name

  • Change your app scheme

  • Change your facebookScheme

  • Change your bundled assets under assetBundlePatterns

隱私

您可以通過將密鑰“privacy”設置為“public”或“unlisted”來在app.json配置文件中設置項目的隱私。

這些選項與YouTube上的操作方式類似。除非你告訴別人關於他們或分享他們，否則不公開的項目URL將是秘密的。公共項目可能會浮現給其他開發人員。

 

鏈接(Linking)

介紹

每個優秀的網站都以https：//為首碼，而https就是所謂的URL方案(scheme )。不安全的網站首碼為http：//，http是URL方案(scheme )。我們簡稱它為方案(scheme )。

要從一個網站導航到另一個網站，您可以在網路上使用錨定標記（<a>）。您還可以使用JavaScript.html，如window.history和window.location。

除https以外，您還可能熟悉mailto方案。當您使用mailto方案打開鏈接時，操作系統將打開已安裝的郵件應用程式。如果您安裝了多個郵件應用程式，則操作系統可能會提示您選擇一個。同樣，還有打電話和發送簡訊的方案。詳細瞭解下麵的內置URL方案。

https和http由您的瀏覽器處理，但可以通過使用不同的url方案鏈接到其他應用程式。例如，當您收到Slack的“Magic Link”電子郵件時，“Launch Slack”按鈕就是一個錨定標記，其href的外觀如下：slack：// secret / magic-login / other-secret。與Slack一樣，您可以告訴操作系統您想要處理定製方案。閱讀有關配置方案的更多信息。當Slack應用程式打開時，它會收到用於打開它的URL，然後可以對通過url提供的數據執行操作 - 在這種情況下，將會將用戶登錄到特定伺服器的秘密字元串。這通常被稱為深度鏈接。詳細瞭解如何處理進入您的應用的深層鏈接。

與計劃深層鏈接不是唯一可用的鏈接工具 - 我們正在努力在iOS上添加對通用鏈接的支持，並且我們已經支持與分支的延期深度鏈接。我們將在未來的SDK中使用更多信息更新此文檔。

從您的應用程式鏈接到其他應用程式

內置的URL方案


正如介紹中提到的，每個平臺上都有一些核心功能的URL方案。以下是方案不是詳盡的清單，但涵蓋了最常用的方案。

從您的應用打開鏈接

React Native中沒有錨標記，因此我們不能編寫<a href="https://expo.io">，而必須使用Linking.openURL。

import { Linking } from 'react-native';

Linking.openURL('https://expo.io');

通常，如果用戶沒有請求URL，通常不會打開URL--下麵是一個簡單的Anchor組件的示例，該組件會在按下按鈕時打開URL。

import { Linking, Text } from 'react-native';

export default class Anchor extends React.Component {
  _handlePress = () => {
    Linking.openURL(this.props.href);
    this.props.onPress && this.props.onPress();
  };

  render() {
    return (
      <Text {...this.props} onPress={this._handlePress}>
        {this.props.children}
      </Text>
    );
  }
}

// <Anchor href="https://google.com">Go to Google</Anchor>
// <Anchor href="mailto://[email protected]">Go to Google</Anchor>

使用Expo.WebBrowser而不是Linking打開網頁鏈接


以下示例說明瞭使用Expo.WebBrowser.openBrowserAsync和React Native的Linking.openURL打開Web鏈接的區別。 通常WebBrowser是一個更好的選擇，因為它是您應用程式中的一種模式，用戶可以輕鬆關閉它並返回到您的應用程式。

import React, { Component } from 'react';
import { Button, Linking, View, StyleSheet } from 'react-native';
import { Constants, WebBrowser } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Open URL with ReactNative.Linking"
          onPress={this._handleOpenWithLinking}
          style={styles.button}
        />
        <Button
          title="Open URL with Expo.WebBrowser"
          onPress={this._handleOpenWithWebBrowser}
          style={styles.button}
        />
      </View>
    );
  }
  
  _handleOpenWithLinking = () => {
    Linking.openURL('https://expo.io');
  }
  
  _handleOpenWithWebBrowser = () => {
    WebBrowser.openBrowserAsync('https://expo.io');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  button: {
    marginVertical: 10,
  },
});

打開其他應用程式的鏈接

如果您知道其他應用的自定義方案，則可以鏈接到該應用。 一些服務提供了深層鏈接的文檔，例如Lyft深層鏈接文檔描述瞭如何直接鏈接到特定的取貨地點和目的地：

 

lyft://ridetype?id=lyft&pickup[latitude]=37.764728&pickup[longitude]=-122.422999&destination[latitude]=37.7763592&destination[longitude]=-122.4242038

用戶可能沒有安裝Lyft應用程式，在這種情況下，您可能想要打開App / Play Store，或者讓他們知道他們需要先安裝它。 我們建議在這些情況下使用庫react-native-app-link。

在iOS上，Linking.canOpenUrl需要額外的配置才能查詢其他應用程式的鏈接方案。 您可以使用app.json中的ios.infoPlist鍵指定應用程式需要查詢的計劃列表。 例如：

 "infoPlist": {
    "LSApplicationQueriesSchemes": ["lyft"]
  }

如果您不指定此列表，則無論設備是否安裝了應用程式，Linking.canOpenUrl都可能返回false。 請註意，此配置只能在獨立應用程式中測試，因為它需要在Expo Client中進行測試時不會應用的本地更改。

鏈接到您的應用程式

在expo客戶端
在繼續之前，值得花些時間瞭解如何在Expo客戶端連接到您的應用程式。 Expo客戶端使用exp：//方案，但如果我們連接到exp：//之後沒有任何地址，它將打開應用程式到主屏幕。

在開發過程中，你的應用程式將生存在一個類似於exp：//wg-qka.community.app.exp.direct：80的網址中。 在部署時，它將位於像exp：//exp.host/@community/with-webbrowser-redirect這樣的URL。 如果您使用<a href="exp://expo.io/@community/with-webbrowser-redirect">打開我的項目</a>等鏈接創建網站，請在設備上打開該網站，然後點擊 鏈接，它會在Expo客戶端中打開您的應用程式。 您也可以使用Linking.openURL從另一個應用程式鏈接到它。

在獨立的應用程式

要鏈接到您的獨立應用程式，您需要為您的應用程式指定一個方案。 您可以通過在方案密鑰下添加一個字元串，在您的app.json中註冊一個方案：

{
  "expo": {
    "scheme": "myapp"
  }
}

一旦構建獨立應用程式並將其安裝到您的設備中，您將可以通過myapp：//的鏈接將其打開。

Expo.Constants.linkingUri

為了節省插入一堆基於您所處環境和硬編碼URL的條件的麻煩，我們提供了linkedUri常量。當你想提供一個需要重定向到你的應用的url的服務時，你可以使用它，它將解析為以下內容：

  • Published app in Expo client: exp://exp.host/@community/with-webbrowser-redirect/+

  • Published app in standalone: myapp://+

  • Development: exp://wg-qka.community.app.exp.direct:80/+

您會註意到，在每個網址的末尾有一個/ + - 在您的應用將使用/ +接收數據之後的任何內容，我們將在下一節討論這些內容。

註意：目前有一個已知問題，其中+不會出現在Android獨立版本中。我們期望儘快在發佈中解決這個問題！

處理鏈接到您的應用程式

有兩種方式可以處理打開您應用的網址。

1.如果應用程式已經打開，應用程式將被預先插入，並且會觸發鏈接事件
您可以使用Linking.addEventListener（'url'，callback）處理這些事件。

2.如果應用程式尚未打開，則會打開該應用程式，並將url作為初始URL傳入
您可以使用Linking.getInitialURL處理這些事件 - 它會返回一個可解析為url的Promise，如果有的話。

請參閱下麵的示例以查看這些實際操作。

通過URL將數據傳遞給您的應用程式
如果我想將一些數據傳遞給我的應用程式，我可以將它作為查詢字元串追加到Constants.linkingUri的末尾。然後你可以用類似於qs的東西來解析查詢字元串。

處理用於打開/前臺應用的URL時，它看起來像這樣：

_handleUrl = (url) => {
  this.setState({ url });
  let queryString = url.replace(Constants.linkingUri, '');
  if (queryString) {
    let data = qs.parse(queryString);
    alert(`Linked to app with data: ${JSON.stringify(data)}`);
  }
}

如果您打開了一個URL，例如$ {Constants.linkingUri}？hello = world＆goodbye = now，則會提示{hello：'world'，再見：'now'}。

 

示例：從WebBrowser鏈接回您的應用程式

示例項目examples / with-webbrowser-redirect演示了處理來自WebBrowser的重定向並從查詢字元串中提取數據。在世博會嘗試一下。

 

例如：使用鏈接進行身份驗證

鏈接到您的應用的常見用例是在打開WebBrowser後重定向到您的應用。例如，您可以在登錄屏幕中打開Web瀏覽器會話，並且當用戶成功登錄後，您可以使用該方案將您的網站重定向回您的應用程式，並將身份驗證令牌和其他數據附加到URL。

 

註意：如果嘗試使用Linking.openURL打開Web瀏覽器進行身份驗證，那麼您的應用可能會因為用戶體驗不好或令人困惑而被Apple拒絕。 WebBrowser.openBrowserAsync以模式打開瀏覽器視窗，外觀和感覺良好，並獲得Apple批准。

 

要查看使用WebBrowser進行Facebook身份驗證的完整示例，請參閱examples / with-facebook-auth。目前，Facebook身份驗證要求您部署一個小型網路伺服器，將其重定向回您的應用（如示例中所述），因為Facebook不會讓您重定向到自定義方案，世博會正在制定一個解決方案，使您更輕鬆。在世博會嘗試一下。

 

使用WebBrowser進行身份驗證的另一個示例可以在expo / auth0-example中找到。

 

何時不使用深層鏈接

這是設置應用程式深層鏈接的最簡單方式，因為它需要最少量的配置。

 

主要問題是，如果用戶沒有安裝您的應用程式，並且通過自定義方案跟隨您的應用程式的鏈接，他們的操作系統將指示該網頁無法打開，但無法提供更多信息。這不是一個很棒的體驗。在瀏覽器中無法解決這個問題。

 

此外，許多消息應用程式不會使用自定義方案自動鏈接URL，例如，exp：//exp.host/@community/native-component-list可能只是在瀏覽器中顯示為純文本，而不是作為鏈接顯示（exp： //exp.host/@community/native-component-list）。

 

下一張繼續介紹，這一篇主要介紹了：expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流，歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公

眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

 

 

If you opened a URL like ${Constants.linkingUri}?hello=world&goodbye=now, this would alert {hello: 'world', goodbye: 'now'}.

Example: linking back to your app from WebBrowser

The example project examples/with-webbrowser-redirect demonstrates handling redirects from WebBrowser and taking data out of the query string. Try it out in Expo.

Example: using linking for authentication

A common use case for linking to your app is to redirect back to your app after opening a WebBrowser. For example, you can open a web browser session to your sign in screen and when the user has successfully signed in, you can have your website redirect back to your app by using the scheme and appending the authentication token and other data to the URL.

Note: if try to use Linking.openURL to open the web browser for authentication then your app may be rejected by Apple on the grounds of a bad or confusing user experience. WebBrowser.openBrowserAsync opens the browser window in a modal, which looks and feels good and is Apple approved.

To see a full example of using WebBrowser for authentication with Facebook, see examples/with-facebook-auth. Currently Facebook authentication requires that you deploy a small webserver to redirect back to your app (as described in the example) because Facebook does not let you redirect to custom schemes, Expo is working on a solution to make this easier for you. Try it out in Expo.

Another example of using WebBrowser for authentication can be found at expo/auth0-example.

When to not use deep links

This is the easiest way to set up deep links into your app because it requires a minimal amount of configuration.

The main problem is that if the user does not have your app installed and follows a link to your app with its custom scheme, their operating system will indicate that the page couldn’t be opened but not give much more information. This is not a great experience. There is no way to work around this in the browser.

Additionally, many messaging apps do not autolink URLs with custom schemes — for example, exp://exp.host/@community/native-component-list might just show up as plain text in your browser rather than as a link (exp://exp.host/@community/native-component-list).


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux操作系統的安裝
    一、介紹 目的：通過本文瞭解並掌握Linux系統安裝的過程 軟體環境 Linux系統：CentOS7.3 虛擬機：VM12 主機系統：Windows8.0 二、安裝虛擬機 首先，需要下載VMware Workstation軟體，下載完後進行安裝 1，雙擊VM戶，出現歡迎的界面 2，一直點下一步，設置 ...
  • alsa音效卡分析alsa-utils調用過程（二）-tinymixer
    繼上一篇文章：http://www.cnblogs.com/linhaostudy/p/8515277.html 三、tinymixer調用分析：（tinymixer.log搜索節點：/dev/snd/controlCx） 還是一樣，系統調用從應用層到kernel層，都要通過VFS來到file_op ...
  • 【MYSQL】語法複習
    一、數據類型 截圖來源: http://www.runoob.com/mysql/mysql-data-types.html 二、基本語句 1、創建數據表 2、刪除數據表 3、新增數據 4、刪除數據 5、更新數據 6、查詢數據 7、表欄位修改 三、其他函數 1、判斷 2、逗號拼接 3、判空 4、轉換 ...
  • 一道很好的mysql面試練習題,having綜合應用
    寫一條SQL語句，求出2門以及2門以上不及格的科目平均分 >要出現2門以及2門以上的學科不及格 >計算該考生所有學科的平均分，不單是，不及格的那幾門 #創建表: 思路一： 求出score < 60的科目數，然後統計平均分 這個結果是錯誤的，原因在於： " 用where過濾了score < 60的科目 ...
  • mysql常用語句練習-基於ecshop2.7.3資料庫(1)
    SELECT * FROM ecs_goods WHERE goods_id = 1;SELECT goods_id, goods_name FROM ecs_goods WHERE goods_id = 1;SELECT goods_id,cat_id,goods_name FROM ecs_go ...
  • hadoop學習之hdfs文件系統
    一、hdfs的概念 Hadoop 實現了一個分散式文件系統（Hadoop Distributed File System），簡稱HDFS。 Hadoop是Apache Lucene創始人Doug Cutting開發的使用廣泛的文本搜索庫。它起源於Apache Nutch，後者是一個開源的網路搜索引擎 ...
  • MySQL到MongoDB的數據同步方法!
    許多公司隨著業務發展，單資料庫實例已經不能滿足業務需要，需要定期進行數據交換，同步到MongoDB， 或其他位置的MySQL，以分散資料庫的併發壓力。 目前大部分都採用自行開發的方式處理，存在開發成本高，不靈活、維護困難等問題。 目前有一款數據交換軟體TreeSoft資料庫管理系統，可以實現定時的數 ...
  • Redis記憶體資料庫-基礎知識
    Redis是什麼 Redis是一個開源的，高性能，C語言開發的 ，鍵值對(key-value)存儲數據的NOSQL資料庫。 基本概念 NOSQL ：Not Only Sql 泛指非關係型資料庫 Redis/ MongoDB/ Hbase 關係型資料庫： mysql/ oracle/ sybase / ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類