Question

我在尝试在智能电视浏览器中运行我的应用程序时遇到create-react-app环境的大问题。

规范电视和浏览器（http://whatismybrowser.com）

电视：Panasonic TC-32DS600B
浏览器：Chrome 23 FreeBSD
userAgent：Mozilla / 5.0（X11; FreeBSD; U; Viera：pt-BR）AppleWebKit / 537.11（KHTML，与Gecko一样）Viera / 3.18.1 Chrome / 23.0.1271.97 Safari / 537.11

这是我想要的：

创建一个新的create-react-app项目
运行yarn build
yarn global add serve && serve -s build
使用我的局域网IP（非本地主机）并在网址地址浏览器http://<my-lan-ip>:5000上输入（5000端口作为serve命令提供的默认端口）

当我按照这些步骤操作时，我会得到一个空白页面。空白页面仅在电视浏览器中出现。在PC和手机上运行良好。

所以我想知道并在这里提出一些分享想法：

旧电视浏览器不支持React？
或许只是一个填充问题？
或者它不支持HTML5，CSS3？

任何人都已经面临这个问题？任何解决方案或否，这是不可能的？

已编辑：解决方案

感谢@Rikin和@JoeClay，我想出了一个解决方案。首先，在下载Chrome版本23之后，我可以看到问题是polyfills（设置和映射）。

安装后yarn add core-js --dev和yarn add raf --dev。

更新 src / index.js

import 'core-js/es6/map'; // <-- added this line after installed packages
import 'core-js/es6/set'; // <-- added this line after installed packages
import 'raf/polyfill'; // <-- added this line after installed packages

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

此外，React Docs的部分有助于找到此解决方案。

Answer 1

较新版本的React（v16 +）需要：

Map和Set数据结构
window.requestAnimationFrame() API

根据MDN，在版本38之前，基本Map和Set支持尚未添加到Chrome，您必须使用供应商前缀访问requestAnimationFrame，直到Chrome 24 。

由于您的电视使用Chrome 23，因此您需要填充这些API。 React docs建议使用core-js或babel-polyfill来实现此目的。

Answer 2

如果您的目标是让您的应用在智能电视上运行，那么可以react-tv看看https://github.com/raphamorim/react-tv

在智能电视浏览器上运行的create-react-app

2 个答案: