将 HTML、CSS 和 JS 转换为 React Native

Posted 2023-02-22

【中文标题】将 HTML、CSS 和 JS 转换为 React Native

【英文标题】：Converting HTML, CSS and JS to React Native

【发布时间】：2020-03-09 18:53:02

【问题描述】：

我正在尝试将以下三环 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,
  

);

感谢您的帮助。

【参考方案1】：

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

react-native render-html

reavt-native htmlview

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