将 HTML、CSS 和 JS 转换为 React Native

Question

我正在尝试将以下三环 Apple 代码嵌入到我的 React Native Expo 应用程序中，作为我的第一个练习应用程序的最后一步： https: //codepen.io/markni/pen/Dmqso

\n\n

然而，我不仅收到错误“ Document variable not defined”（甚至不存在），而且还在努力集成此代码。任何人都可以帮我解决我的逻辑错误，并告诉我这是否是将 html、css 和 js 引入 React Native 应用程序的好习惯。

\n\n

import React, { Component } from "react";\nimport { ScrollView, StyleSheet, WebView, } from \'react-native\';\nimport * as d3 from "d3";\nimport {render} from \'react-dom\';\nimport ReactDOM from \'react-dom\';\nimport { ExpoLinksView } from \'@expo/samples\';\n\n\nclass HomeScreen extends Component  {\n  componentDidMount() {\n    (function(){\n      var gap = 2;\n\n      var ranDataset = function () {\n        var ran = Math.random();\n\n        return    [\n          {index: 0, name: \'move\', icon: "\\uF105", percentage: ran * 60 + 30},\n          {index: 1, name: \'exercise\', icon: "\\uF101", percentage: ran * 60 + 30},\n          {index: 2, name: \'stand\', icon: "\\uF106", percentage: ran * 60 + 30}\n        ];\n\n      };\n\n      var ranDataset2 = function () {\n        var ran = Math.random();\n\n        return    [\n          {index: 0, name: \'move\', icon: "\\uF105", percentage: ran * 60 + 30}\n        ];\n\n      };\n      var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];\n      var width = 500,\n          height = 500,\n          \xcf\x84 = 2 * Math.PI;\n\n      function build(dataset,singleArcView){\n\n        var arc = d3.arc()\n            .startAngle(0)\n            .endAngle(function (d) {\n              return d.percentage / 100 * \xcf\x84;\n            })\n            .innerRadius(function (d) {\n              return 140 - d.index * (40 + gap)\n            })\n            .outerRadius(function (d) {\n              return 180 - d.index * (40 + gap)\n            })\n            .cornerRadius(20);//modified d3 api only\n\n        var background = d3.arc()\n            .startAngle(0)\n            .endAngle(\xcf\x84)\n            .innerRadius(function (d, i) {\n              return 140 - d.index * (40 + gap)\n            })\n            .outerRadius(function (d, i) {\n              return 180 - d.index * (40 + gap)\n            });\n\n        var svg = d3.select("body").append("svg")\n            .attr("width", width)\n            .attr("height", height)\n            .append("g")\n            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");\n\n        //add linear gradient, notice apple uses gradient alone the arc..\n        //meh, close enough...\n\n\n        var gradient = svg.append("svg:defs")\n            .append("svg:linearGradient")\n            .attr("id", "gradient")\n            .attr("x1", "0%")\n            .attr("y1", "100%")\n            .attr("x2", "50%")\n            .attr("y2", "0%")\n            .attr("spreadMethod", "pad");\n\n        gradient.append("svg:stop")\n            .attr("offset", "0%")\n            .attr("stop-color", "#fe08b5")\n            .attr("stop-opacity", 1);\n\n        gradient.append("svg:stop")\n            .attr("offset", "100%")\n            .attr("stop-color", "#ff1410")\n            .attr("stop-opacity", 1);\n\n\n        //add some shadows\n        var defs = svg.append("defs");\n\n        var filter = defs.append("filter")\n            .attr("id", "dropshadow")\n\n        filter.append("feGaussianBlur")\n            .attr("in", "SourceAlpha")\n            .attr("stdDeviation", 4)\n            .attr("result", "blur");\n        filter.append("feOffset")\n            .attr("in", "blur")\n            .attr("dx", 1)\n            .attr("dy", 1)\n            .attr("result", "offsetBlur");\n\n        var feMerge = filter.append("feMerge");\n\n        feMerge.append("feMergeNode")\n            .attr("in", "offsetBlur");\n        feMerge.append("feMergeNode")\n            .attr("in", "SourceGraphic");\n\n        var field = svg.selectAll("g")\n            .data(dataset)\n            .enter().append("g");\n\n        field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)");\n\n        field.append("path").attr("class", "bg")\n            .style("fill", function (d) {\n              return colors[d.index];\n            })\n            .style("opacity", 0.2)\n            .attr("d", background);\n\n        field.append("text").attr(\'class\',\'icon\');\n\n\n        if(singleArcView){\n\n          field.append("text").attr(\'class\',\'goal\').text("OF 600 CALS").attr("transform","translate(0,50)");\n          field.append("text").attr(\'class\',\'completed\').attr("transform","translate(0,0)");\n\n        }\n\n        d3.transition().duration(1750).each(update);\n\n        function update() {\n          field = field\n              .each(function (d) {\n                this._value = d.percentage;\n              })\n              .data(dataset)\n              .each(function (d) {\n                d.previousValue = this._value;\n              });\n\n          field.select("path.progress").transition().duration(1750).delay(function (d, i) {\n            return i * 200\n          })\n              .ease("elastic")\n              .attrTween("d", arcTween)\n              .style("fill", function (d) {\n                if(d.index===0){\n                  return "url(#gradient)"\n                }\n                return colors[d.index];\n              });\n\n          field.select("text.icon").text(function (d) {\n            return d.icon;\n          }).attr("transform", function (d) {\n                return "translate(10," + -(150 - d.index * (40 + gap)) + ")"\n\n              });\n\n          field.select("text.completed").text(function (d) {\n            return Math.round(d.percentage /100 * 600);\n          });\n\n          setTimeout(update, 2000);\n\n        }\n\n        function arcTween(d) {\n          var i = d3.interpolateNumber(d.previousValue, d.percentage);\n          return function (t) {\n            d.percentage = i(t);\n            return arc(d);\n          };\n        }\n\n\n      }\n\n\n      build(ranDataset);\n      build(ranDataset2,true);\n\n\n    })()\n\n  }\n  render() {\n  return (\n    <ScrollView style={styles.container}>\n\n<WebView\n        source={{uri: \'https://cdn.rawgit.com/bm-w/d3/master/d3.js\'}}\n      />\n      <ExpoLinksView />\n    </ScrollView>\n  );\n}\n}\n\nexport default HomeScreen\n\nLinksScreen.navigationOptions = {\n  title: \'Links\',\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    paddingTop: 15,\n    backgroundColor: \'#fff\',\n  },\n\n  body: {\n    backgroundColor: \'#000000\',\n    padding:0,\n    margin:0,\n\n  },\n  goal: {\n    fontSize: 30,\n\n\n  },\n  completed: {\n    fontSize: 95,\n  }\n\n});\n

\n\n

感谢您的帮助。

\n

Answer 1

您可以使用一些 3rd 方库在 React Native 中渲染 HTML。

反应本机渲染 html

reavt-native htmlview

注意- 某些 HTML 标签可能无法在这些库中工作。但大多数 HTML 标签都可以在上述库中显示。