Question

我想使用create-react-app来构建一个Web应用程序，然后将其与Tizen打包在一起以制作适用于Samsung Smart-TV的应用程序。我如何建立这样的项目？要创建我的React-app的Tizen项目，我应该构建，打包或添加什么？如果有人可以给我写一个循序渐进的指南，我将非常感谢。

我尝试在Tizen项目中创建一个react应用。没用我试图构建我的react应用程序并将构建目录复制到Tizen项目。没用我认为在config.xml中的react应用中指向index.html会产生一些结果。但不是。尝试将文件从react应用程序逐步添加到我的Tizen应用程序中。失败。

三星电视的发展似乎很难。救命。我是耐火的和绝望的。谢谢。

Answer 1

有点挑战，但您可以做到

请遵循以下说明：

先决条件

支持Tizen 4.0及更高版本的三星智能电视
Tizen Studio 3.x-download link
Oracle JDK 8

设置：

下载并安装Tizen Studio-follow instructions
转到电视扩展名download section ARCHIVE
下载适用于Tizen SDK的最新4.x TV Extension（最新版本为远：4.1.2）
启动软件包管理器，然后单击“配置”齿轮图标。扩大底部的“扩展SDK”部分。单击“ +”图标，然后将下载的zip归档文件添加为存储库。
选择已下载的TV Extensions-4.0扩展名存储库，然后单击“安装”。
如果在主SDK /扩展SDK中看不到添加的软件包标签-关闭并重新打开包管理器。
确保已正确安装基本工具：
主要SDK-> Tizen SDK工具
主要SDK-> Tizen SDK工具>本机工具链>（所有内容）
主要SDK-> 4.0电视
扩展SDK->其他-> TV Extensions-4.0
扩展SDK->其他->三星证书扩展
扩展SDK->其他->电视扩展工具

创建项目

打开TizenStudio>创建新项目>模板>自定义>选择三星电视v4.0
Web应用程序>基本项目>“您的应用程序名称”>完成
随意修改index.html / css文件夹/config.xml
右键单击项目名称，然后选择运行方式> Tizen Web Simulator 应用程序（三星电视），可让您快速粗暴地查看该应用程序。

config.xml

<?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"/>

index.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>

与REAL DEVICE配对

通过设置>内容查找Samsung TV设备的IP
找到计算机的IP地址>设置>网络>网络状态> IP设置
在Mac中快捷方式-单击alt + WIFI图标，然后将IP复制并粘贴地址
Tizen Studio>设备管理器>单击远程设备管理器> 输入设备的名称和IP>将连接设置为“开”
将您的计算机IP添加到Samsung TV：转到电视上的Apps
单击遥控器上的数字按钮（123）>输入数字 1,2,3,4,5
将弹出一个屏幕，您可以在其中输入计算机的IP地址
TizenStudio>工具（在顶部栏菜单上）>设备管理器->连接在将证书上传到设备上
右键单击设备管理器中的设备，选择“允许安装应用程序”
TizenStudio>设备和仿真器名称下拉列表>选择添加的设备
TizenStudio>右键单击项目名称>运行方式>“ Tizen Web 应用”
❗️重要❗️如果您是第一次这样做，它将询问您创建证书>单击“确定”以创建证书，然后按照说明

Answer 2

Tizen Studio似乎对文件放置有点奇怪。尝试将config.xml文件放在根目录下，但指向./build/index.html的位置似乎使它感到困惑。

我这样做的方式是这样的：

创建您的React应用。
将homepage内的package.json键设置为./，以使资产文件路径相对于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中禁用验证器。启用此功能后，当在构建过程中验证最小化代码时，该构建就会阻塞。

在旁注...为了使用遥控器导航，我使用了this component library。这是最容易实现的。

Answer 3

您可以尝试https://renative.org/docs/platform-tizen

它会基于react native生成Hello World应用程序，其余的工作将为您完成

您还将获得： -重点管理 -生成的导航示例 -内置对字体，矢量图形的支持 -重新加载热模块以进行快速开发

完成安装设置后，您只需在模拟器中运行它即可。

rnv run -p tizen

或

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

完成操作后，您可以查看./platformBuilds/..文件夹以了解它们如何协同工作

如何在Tizen中建立一个create-react-app？

3 个答案: