ReactNativeHTML-渲染線性背景梯度 -有解無憂

我目前的HTML溢位高度：300一個盒子，其中使用了React Native HTML。(這個包。

我想用這個庫實作的，是一個線性漸變，在盒子的最后一個元素上從透明漸變為白色。一個絕對定位的、底部為 0:的漸變，給人一種還有更多東西可看的錯覺，而且不是那么刺眼的切斷。

在我下面的代碼中。<scrollfade> test </scrollfade>是我試圖通過這個元素來實作。

你會注意到它的自定義渲染器被定義在這里：

scrollfade: HTMLElementModel.fromCustomModel({
      tagName: 'scrollfade',
      mixedUAStyles: {
        position: 'absolute',
        寬度：'100%'。
        高度: '220px',
        left: 0,
        底部。0,
        顯示: 'flex',
      },
      contentModel: HTMLContentModel.block。
    }),

然而，這似乎并不便于背景圖片、背景梯度或類似的東西來定義一種可能實作的樣式。我試著使用 "react-native-linear-gradient"--就在html渲染器的下面，但是它在dom中的位置不正確，沒有任何影響。我不確定是否有可能將這兩種技術混合起來，在html模板中使用本地組件，我懷疑不可能。我想知道如何為梯度撰寫一個自定義的渲染器，并在模板中定義它，或者其他更簡單的方法。

澄清一下，我正在尋找一個可視化的梯度解決方案，允許文本預先溢位來的地方稍微照亮。

import React, { FunctionComponent } from 'react';
從'react-native'匯入 { StyleSheet, Text, useWindowDimensions, ViewStyle }。
import LinearGradient from 'react-native-linear-gradient';
匯入 RenderHtml, {
  defaultSystemFonts,
  HTMLContentModel。
  HTMLElementModel,
  MixedStyleRecord,
} from 'react-native-render-html';
從'./styles/native'匯入 { Theme, useTheme }。

介面 Props {
  html: string;
  padding: boolean;
  scrollEnabled: boolean;
  style? ViewStyle;
  pointerEvents? 'none' | 'auto' | 'box-none' | 'box-only'。
}

// 以后在你的樣式中...
const styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    高度：100。
  },
});

const tagsStyles: MixedStyleRecord = (theme: Theme) => {
  回傳 {
    body: {
      color: theme.textMid,
      fontFamily: 'OpenSans-Regular',
      背景：theme.background。
      溢位：'隱藏'。
    },
    a: {
      color: theme.primary,
    },
    h1: {
      color: theme.textDark,
    },
    h2: {
      color: theme.textDark,
    },
    h3: {
      color: theme.textDark,
    },
    h4: {
      color: theme.textDark,
    },
    h5: {
      color: theme.textDark,
    },
    h6: {
      color: theme.textDark,
    },
  };
};

const customHTMLElementModels = (style: any, scrollEnabled: boolean, theme: Theme, padding: boolean) => {
  回傳 {
    模板。HTMLElementModel.fromCustomModel({
      tagName: 'template',
      mixedUAStyles: {
        ...樣式。
        position: 'relative',
        padding: padding ? 0 20px 40px 20px' : '0',
        overflow: scrollEnabled ? '滾動'：'隱藏'。
      },
      contentModel: HTMLContentModel.block。
    }),
    scrollfade: HTMLElementModel.fromCustomModel({
      tagName: 'scrollfade',
      mixedUAStyles: {
        position: 'absolute',
        寬度：'100%'。
        高度: '220px',
        left: 0,
        底部。0,
        顯示: 'flex',
      },
      contentModel: HTMLContentModel.block。
    }),
  };
};

const wrapHTMLInBody = (html: string) => {
  回傳 `
      <body> 
          <template>/span>
            ${html}
            <scrollfade>test</scrollfade> 
          </template>/span>
          
      </body> 
  `;
};

const 描述。FunctionComponent<Props>=（props）=> {
  const { width } = useWindowDimensions( = useWindowDimensions()。
  const theme = useTheme();
  const systemFonts = [...defaultSystemFonts, 'OpenSans-Regular'];
  const endColor = getTheme() === 'dark' ? 'rgba(0,0,0,0)' : 'rgba(255,255,0)' 。

  回傳 (
    <> 
      <RenderHtml。
        contentWidth={width}。
        source={{}
          html: wrapHTMLInBody(
            '<p>Miss polly had a dolly that was sick sick</p>/span>Miss polly had a dolly that was sick sick< /p>Miss polly had a dolly that was sick sick sick</p>/span>Miss polly had a dolly that was sick sick sick< /p>Miss polly had a dolly that was sick sick sick</p>/span>Miss polly had a dolly that was sick sick sick< /p>Miss polly had a dolly that was sick sick< p>Miss polly had a dolly that was sick sick</p> <p>Miss polly had a dolly that was sick sick sick</p> < p>Miss polly had a dolly that was sick sick</p> <p> Miss polly had a dolly that was sick sick</p> <p>Miss polly had a dolly that was sick sick sick< /p><p> Miss polly had a dolly that was sick sick</p> '。
          ),
        }}
        tagsStyles={tagsStyles(theme)}。
        customHTMLElementModels={customHTMLElementModels(props.style, props.rollEnabled, theme, props.padding)}。
        systemFonts={systemFonts}。
      />
    </>.
  );
};

出口默認描述。

uj5u.com熱心網友回復：

我認為你需要的是一個組件自定義渲染器。

您可以為一個 html 標簽同時定義自定義模型和自定義（組件）呈現器。大概是這樣的：

import React, {FunctionComponent} from 'react';
從'react-native'匯入{StyleSheet, Text, useWindowDimensions, ViewStyle}。
import LinearGradient from 'react-native-linear-gradient';
匯入 RenderHtml, {
  CustomRendererProps,
  defaultSystemFonts,
  HTMLContentModel。
  HTMLElementModel,
  MixedStyleRecord。
  RenderHTMLProps,
  TChildrenRenderer。
  TBlock,
  TNodeChildrenRenderer。
}來自'react-native-render-html'。
從'./styles/native'匯入{Theme, useTheme}。

介面 Props {
  html: string;
  padding: boolean;
  scrollEnabled: boolean;
  style? ViewStyle;
  pointerEvents? 'none' | 'auto' | 'box-none' | 'box-only'。
}

// 以后在你的樣式中...
const styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    高度：100。
  },
});

const customHTMLElementModels = (
  style: any,
  scrollEnabled: boolean,
  主題。主題。
  padding: boolean,
) => {
  回傳 {
    模板。HTMLElementModel.fromCustomModel({
      tagName: 'template',
      mixedUAStyles: {
        ...樣式。
        position: 'relative',
        padding: padding ? 0 20px 40px 20px' : '0',
        overflow: scrollEnabled ? '滾動'：'隱藏'。
      },
      contentModel: HTMLContentModel.block。
    }),
    scrollfade: HTMLElementModel.fromCustomModel({
      tagName: 'scrollfade',
      mixedUAStyles: {
        position: 'absolute',
        寬度：'100%'。
        高度: '220px',
        left: 0,
        底部。0,
        顯示: 'flex',
      },
      contentModel: HTMLContentModel.block。
    }),
  };
};

const renderers: RenderHTMLProps['renderers'] = {
  scrollfade: ({TDefaultRenderer, ...props}: CustomRendererProps<TBlock>) => {
    回傳 (
      <TDefaultRenderer {...props}> 
        <TNodeChildrenRenderer tnode={props.tnode} /> 
        <LinearGradient style={styles.linearGradient} />/span>
      </TDefaultRenderer> 
    );
  },
};

const wrapHTMLInBody = (html: string) => {
  回傳 `
      <body> 
          <template>/span>
            ${html}
            <scrollfade>test</scrollfade> 
          </template>/span>
          
      </body> 
  `;
};

const 描述。FunctionComponent<Props>=（props）=> {
  const {width} = useWindowDimensions();
  const theme = useTheme();
  const systemFonts = [...defaultSystemFonts, 'OpenSans-Regular'];

  回傳 (
    <> 
      <RenderHtml。
        contentWidth={width}。
        source={{}
          html: wrapHTMLInBody(
            '<p>Miss polly had a dolly that was sick sick</p>/span>Miss polly had a dolly that was sick sick< /p>Miss polly had a dolly that was sick sick sick</p>/span>Miss polly had a dolly that was sick sick sick< /p>Miss polly had a dolly that was sick sick sick</p>/span>Miss polly had a dolly that was sick sick sick< /p>Miss polly had a dolly that was sick sick< p>Miss polly had a dolly that was sick sick</p> <p>Miss polly had a dolly that was sick sick sick</p> < p>Miss polly had a dolly that was sick sick</p> <p> Miss polly had a dolly that was sick sick</p> <p>Miss polly had a dolly that was sick sick sick< /p><p> Miss polly had a dolly that was sick sick</p> '。
          ),
        }}
        renderers={renderers}
        customHTMLElementModels={customHTMLElementModels(
          props.style,
          props.scrollEnabled,
          主題。
          props.padding,
        )}
        systemFonts={systemFonts}。
      />
    </>。
  );
};

出口默認描述。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309153.html

標籤：

上一篇：如何在reactnative中從API回應中渲染500多個產品

下一篇：無法讀取輸入日志filebeat