堆棧內存溢出
  簡體   English   中英

如何在 Tizen 中構建 create-react-app？

[英]How do I build a create-react-app in Tizen?

 原文  2019-09-03 13:42:36  3   3    reactjs/ samsung-smart-tv/ tizen-web-app

問題描述

我想使用 create-react-app 構建一個 Web 應用程序，然后將其與 Tizen 打包以制作一個適用於三星智能電視的應用程序。 我如何建立這樣的項目？ 要創建我的 React 應用程序的 Tizen 項目，我應該構建、打包或添加什么？ 如果有人能給我寫一個分步指南，我將非常非常感激。

我試圖在 Tizen 項目中創建一個反應應用程序。 它沒有用。 我嘗試構建我的 React 應用程序並將構建目錄復制到 Tizen 項目。 它沒有用。 我認為在 config.xml 中指向我的 react 應用程序中的 index.html 會產生一些結果。 但不是。 嘗試將文件從 react 應用程序增量添加到我的 Tizen 應用程序。 失敗。

這個三星電視的開發似乎有點困難。 幫助。 我是防火和絕望的。 謝謝。

3 個解決方案

解決方案1
 7  2020-01-05 19:26:15

Tizen Studio 在文件放置方面似乎有點奇怪。 試圖將config.xml文件放在根目錄下，但指向./build/index.html的位置似乎會混淆它。

我這樣做的方式是這樣的：

  • 創建您的反應應用程序。
  • 將package.json homepage鍵設置為./以便資產文件路徑是相對於index.html而不是絕對生成的。
  • 運行生產構建yarn build （或npm run build ）以生成./build文件夾。
  • 啟動一個新的 Tizen Web 應用程序，指向 react 應用程序的./build文件夾。 這需要在您輸入項目名稱的位置展開“更多屬性”，並取消選中默認位置（以便您可以瀏覽到./build文件夾）。 對於與 Tizen 相關的所有其他內容，您應該能夠遵循 Tizen 文檔。
  • 將生成的 Tizen Web 應用程序文件（ icon.png 、 .settings 、 .project 、 config.xml 、 .tproject ）復制到 react 應用程序的./public文件夾中，以便在每次構建后復制它們。 請注意，Tizen 點文件不會顯示在 Tizen Studio 中，您應該從將顯示它們的文件資源管理器中復制它們。 在 Tizen Studio 中，只有這個./build文件夾會顯示為您項目的一部分，並且應該只用於運行build / debug / run操作。 對 Tizen 應用程序配置等的任何更改都應在 react 應用程序的./public文件夾中完成，否則它們將在每次構建后被覆蓋。
  • 在 Tizen Studio 首選項Tizen Studio/Web/Editor/Javascript Editor禁用驗證Tizen Studio/Web/Editor/Javascript Editor 。 啟用此功能后，在構建過程中驗證縮小代碼時構建會阻塞。

附帶說明...對於使用遙控器進行導航，我使用了這個組件庫。 這是最容易實施的。

解決方案2
 4  2020-01-11 21:10:38

你可以試試https://renative.org/docs/platform-tizen

它基於 react native 生成​​ hello world 應用程序，其余的為您完成

您還將獲得： - 焦點管理 - 生成的導航示例 - 內置對字體、矢量圖形的支持 - 用於快速開發的熱模塊重新加載

按照安裝設置后，您只需在模擬器中運行它：

rnv run -p tizen

或者

rnv run -p tizen -d -t <TIZEN_TV_IP>

完成后，您可以查看./platformBuilds/..文件夾以了解它們是如何協同工作的

解決方案3
 3  2019-09-12 18:48:54

這有點挑戰性，但你可以做到

請按照以下說明操作：

先決條件

  • 支持 Tizen 4.0 及以上版本的三星智能電視
  • Tizen Studio 3.x - 下載鏈接
  • 甲骨文 JDK 8

設置：

  • 下載並安裝 Tizen Studio - 按照說明進行操作
  • 轉到電視擴展下載部分存檔
  • 下載適用於 Tizen SDK 的最新 4.x TV 擴展（目前最新版本：4.1.2）
  • 啟動包管理器並單擊“配置”齒輪圖標。 展開底部的“擴展 SDK”部分。 單擊“+”圖標並將下載的 zip-archive 添加為存儲庫。
  • 選擇在下載的存儲庫中找到的 TV Extensions-4.0 擴展，然后單擊“安裝”。
  • 如果在 Main SDK / Extension SDK 選項卡中看不到添加的包 - 關閉並重新打開包管理器。
  • 確保基本工具已正確安裝：
  • 主 SDK -> Tizen SDK 工具
  • Main SDK -> Tizen SDK Tools > Native Toolchains > (everything)
  • 主 SDK -> 4.0 電視
  • 擴展 SDK -> Extras -> TV Extensions-4.0
  • 擴展 SDK -> Extras -> 三星證書擴展
  • Extension SDK -> Extras -> TV Extensions Tools

創建項目

  • 打開 TizenStudio > 創建新項目 > 模板 > 自定義 > 選擇 TV-Samsung v4.0
  • Web 應用程序 > 基礎項目 > “您的應用程序名稱” > 完成
  • 隨意修改index.html/css文件夾/config.xml
  • 右鍵單擊項目名稱，然后選擇 Run As > Tizen Web Simulator Application (Samsung TV) 以在應用程序上獲得非常粗略、快速和骯臟的外觀。

配置文件

<?xml version="1.0" encoding="UTF-8"?>


<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<icon src="icon.png"/>
<name>Testing</name>
<tizen:profile name="tv-samsung"/>

<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://tizen.org/privilege/tv.display"/>
<tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/volume.set"/> 
<tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>   
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:setting pointing-device-support='disable' />
<tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/style.css" />

</head>
<body> 

   <script>
        window.open("http://0.0.0.0:3000") <!-- Add your IP address ->
   </script>

</body>
</html>

與真實設備配對

  1. 通過設置>某事查找三星電視設備的IP
  2. 找到你電腦的IP地址>設置>網絡>網絡狀態>IP設置
  3. Mac 中的快捷方式 - 單擊 alt + WIFI 圖標，然后復制粘貼 IP 地址
  4. Tizen Studio > 設備管理器 > 單擊遠程設備管理器 > 鍵入設備的名稱和 IP > 將連接設置為“打開”
  5. 將您的計算機 IP 添加到三星電視：轉到電視上的應用程序
  6. 單擊遙控器上的數字按鈕 (123) > 輸入數字 1、2、3、4、5
  7. 將彈出一個屏幕，您可以在其中輸入計算機的 IP 地址
  8. TizenStudio > 工具（在頂部欄菜單上）> 設備管理器 -> 連接上傳證書到設備
  9. 在設備管理器中右鍵單擊設備選擇“允許安裝應用程序”
  10. TizenStudio > 設備和模擬器名稱下拉菜單 > 選擇添加的設備
  11. TizenStudio > 右鍵單擊​​項目名稱 > 運行方式 > “Tizen Web 應用程序”
  12. ❗️重要❗️如果您是第一次這樣做，它會要求您創建證書> 單擊“確定”以創建證書並按照說明進行操作

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用create-react-app創建一個新項目 如何在 create-react-app 中添加構造函數？ 如何在 AWS Amplify 上調試 create-react-app 我該如何解決這個 create-react-app 問題？ 如何修復此 npx create-react-app 錯誤？ 如何在 create-react-app 中隱藏 API 鍵？ 如何從 Create-React-App 生產構建中排除 React Refresh？ 為什么我不能在 ec2 上構建 create-react-app？ 如何使 create-react-app 自動構建？ 如何在 create-react-app 中更改 TypeScript 代碼的 outputDir (/build)
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM