0

我想在“katequation”类出现在数据中时渲染 mathjax 我有一页数据被渲染有一些长的数学方程式 react-native-render-html 没有以正确的格式渲染所以我使用自定义 HTML 标签但是我在 props 中获得的数据是整页数据，而不是 div 中的数据

import React, { useEffect, useState , useRef, useCallback } from 'react';
    import { StyleSheet , ImageBackground, Text, Share,  BackHandler, TouchableOpacity, Dimensions, Linking,  View, FlatList, RefreshControl, Pressable,  Image,  SectionList , ScrollView } from 'react-native';
    import MathJax from 'react-native-mathjax';
    import { WebView } from 'react-native-webview';
    import table, {   cssRulesFromSpecs ,defaultTableStylesSpecs , animationType , alterNode, alterData
} from '@native-html/table-plugin';
    import HTML , { IGNORED_TAGS , domNodeToHTMLString} from 'react-native-render-html';

    const htmlProps = {
    alterNode,
    alterData,
    WebView,
    renderers: {
    table,
    div : (child ,htmlAttribs, passProps , data , domNode)  => {
    return(<View > 
    <MathJax html={data.source.html}  style={{backgroundColor:'red'}}/> 
    </View>)},
    },
    ignoredTags: IGNORED_TAGS,
    renderersProps: {
    table: {
    animationType: 'animated',
    tableStyleSpecs: {cellSpacingEm: 1.1,
    fitContainerWidth: true,
    thOddBackground: '#005082',
    thOddColor:'#ffffff',
    trEvenBackground: '#ffffff',
    trOddBackground: '#deeaf6',
    tdBorderColor: '#c9c9c9',
    thBorderColor: '#c9c9c9',
    outerBorderColor:'#c9c9c9',
    cellPaddingEm: .5,
    outerBorderWidthPx: 1,
    rowsBorderWidthPx: 1 ,
    columnsBorderWidthPx: 1 ,
    }
    },
    },
    alterNode,
    ignoredTags: IGNORED_TAGS,
    defaultTableStylesSpecs,
    cssRulesFromSpecs ,  
    defaultWebViewProps: {},  
    tagsStyles: { i: { textAlign: 'center', fontStyle: 'italic', color: 'grey' } ,  a: 
    {fontFamily:'roboto', fontSize:18,  paddingVertical:5}, table: {width: '95%', 
    marginHorizontal:'2%' , borderColor:'#c9c9c9' , borderWidth:1 }},
    classesStyles: { 'last-paragraph': { textAlign: 'right', color: 'teal', fontWeight: 
    '800' }, 'blog-detail-table': {width: '95%', marginHorizontal:'2%' , 
    borderColor:'#c9c9c9' , borderWidth:1 } }
    };

    <HTML 
    source={{html: item.description }} 
    {...htmlProps} 
    allowWhitespaceNodes ={false}
    automaticallyAdjustContentInsets={true}
    />
4

0 回答 0