将 HTML、CSS 和 JS 转换为 React Native

Question

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

但是，我不仅收到错误“Document variable not defined”（甚至不存在），而且还在努力集成此代码。谁能帮我解决我的逻辑错误，并告诉我这是否是将 html、css 和 js 用于反应原生应用程序的好习惯。

import React, { Component } from "react";
import { ScrollView, StyleSheet, WebView, } from 'react-native';
import * as d3 from "d3";
import {render} from 'react-dom';
import ReactDOM from 'react-dom';
import { ExpoLinksView } from '@expo/samples';


class HomeScreen extends Component  {
  componentDidMount() {
    (function(){
      var gap = 2;

      var ranDataset = function () {
        var ran = Math.random();

        return    [
          {index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30},
          {index: 1, name: 'exercise', icon: "\uF101", percentage: ran * 60 + 30},
          {index: 2, name: 'stand', icon: "\uF106", percentage: ran * 60 + 30}
        ];

      };

      var ranDataset2 = function () {
        var ran = Math.random();

        return    [
          {index: 0, name: 'move', icon: "\uF105", percentage: ran * 60 + 30}
        ];

      };
      var colors = ["#e90b3a", "#a0ff03", "#1ad5de"];
      var width = 500,
          height = 500,
          τ = 2 * Math.PI;

      function build(dataset,singleArcView){

        var arc = d3.arc()
            .startAngle(0)
            .endAngle(function (d) {
              return d.percentage / 100 * τ;
            })
            .innerRadius(function (d) {
              return 140 - d.index * (40 + gap)
            })
            .outerRadius(function (d) {
              return 180 - d.index * (40 + gap)
            })
            .cornerRadius(20);//modified d3 api only

        var background = d3.arc()
            .startAngle(0)
            .endAngle(τ)
            .innerRadius(function (d, i) {
              return 140 - d.index * (40 + gap)
            })
            .outerRadius(function (d, i) {
              return 180 - d.index * (40 + gap)
            });

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        //add linear gradient, notice apple uses gradient alone the arc..
        //meh, close enough...


        var gradient = svg.append("svg:defs")
            .append("svg:linearGradient")
            .attr("id", "gradient")
            .attr("x1", "0%")
            .attr("y1", "100%")
            .attr("x2", "50%")
            .attr("y2", "0%")
            .attr("spreadMethod", "pad");

        gradient.append("svg:stop")
            .attr("offset", "0%")
            .attr("stop-color", "#fe08b5")
            .attr("stop-opacity", 1);

        gradient.append("svg:stop")
            .attr("offset", "100%")
            .attr("stop-color", "#ff1410")
            .attr("stop-opacity", 1);


        //add some shadows
        var defs = svg.append("defs");

        var filter = defs.append("filter")
            .attr("id", "dropshadow")

        filter.append("feGaussianBlur")
            .attr("in", "SourceAlpha")
            .attr("stdDeviation", 4)
            .attr("result", "blur");
        filter.append("feOffset")
            .attr("in", "blur")
            .attr("dx", 1)
            .attr("dy", 1)
            .attr("result", "offsetBlur");

        var feMerge = filter.append("feMerge");

        feMerge.append("feMergeNode")
            .attr("in", "offsetBlur");
        feMerge.append("feMergeNode")
            .attr("in", "SourceGraphic");

        var field = svg.selectAll("g")
            .data(dataset)
            .enter().append("g");

        field.append("path").attr("class", "progress").attr("filter", "url(#dropshadow)");

        field.append("path").attr("class", "bg")
            .style("fill", function (d) {
              return colors[d.index];
            })
            .style("opacity", 0.2)
            .attr("d", background);

        field.append("text").attr('class','icon');


        if(singleArcView){

          field.append("text").attr('class','goal').text("OF 600 CALS").attr("transform","translate(0,50)");
          field.append("text").attr('class','completed').attr("transform","translate(0,0)");

        }

        d3.transition().duration(1750).each(update);

        function update() {
          field = field
              .each(function (d) {
                this._value = d.percentage;
              })
              .data(dataset)
              .each(function (d) {
                d.previousValue = this._value;
              });

          field.select("path.progress").transition().duration(1750).delay(function (d, i) {
            return i * 200
          })
              .ease("elastic")
              .attrTween("d", arcTween)
              .style("fill", function (d) {
                if(d.index===0){
                  return "url(#gradient)"
                }
                return colors[d.index];
              });

          field.select("text.icon").text(function (d) {
            return d.icon;
          }).attr("transform", function (d) {
                return "translate(10," + -(150 - d.index * (40 + gap)) + ")"

              });

          field.select("text.completed").text(function (d) {
            return Math.round(d.percentage /100 * 600);
          });

          setTimeout(update, 2000);

        }

        function arcTween(d) {
          var i = d3.interpolateNumber(d.previousValue, d.percentage);
          return function (t) {
            d.percentage = i(t);
            return arc(d);
          };
        }


      }


      build(ranDataset);
      build(ranDataset2,true);


    })()

  }
  render() {
  return (
    <ScrollView style={styles.container}>

<WebView
        source={{uri: 'https://cdn.rawgit.com/bm-w/d3/master/d3.js'}}
      />
      <ExpoLinksView />
    </ScrollView>
  );
}
}

export default HomeScreen

LinksScreen.navigationOptions = {
  title: 'Links',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    backgroundColor: '#fff',
  },

  body: {
    backgroundColor: '#000000',
    padding:0,
    margin:0,

  },
  goal: {
    fontSize: 30,


  },
  completed: {
    fontSize: 95,
  }

});

感谢您的帮助。

Answer 1

有一些 3rd 方库可用于在 react native 中呈现 HTML。

react-native render-html

reavt-native htmlview

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