Use internal default renderers logic in custom renderers

[wulaizi]

Can renderers return a page element? For example, I just want to get attributes through renderers, but don’t want to change the element, but this method must require an element to be returned. If it is a picture, I return Image, which will cause the picture to be blurred (because I have no width and height when I return, I can only get it through Image.getSize Will make the picture blurry) So I don’t want to do any processing, I just want to return a webpage element img, how to operate it as it is

[wulaizi]

renderers={{
img: (htmlAttribs, children, convertedCSSStyles, passProps) => {
let imageSrc = htmlAttribs?.name || htmlAttribs?.src
let newImageUrl = RegHelper.HandleImage(imageSrc)
return React.createElement('img',{
src: newImageUrl
})
}
}}

[jsamr]

@wulaizi If I understand you well, you would like to change the DOM node attributes? If that is the case, you could use alterNode :-)

[jsamr]

const alterNode = (domNode) => {
  if (domNode.tagName === "img") {
    const htmlAttribs = domNode.attribs;
    let imageSrc = htmlAttribs?.name || htmlAttribs?.src;
    let newImageUrl = RegHelper.HandleImage(imageSrc);
    domNode.attribs = { ...htmlAttribs, src: newImageUrl };
  }
  return domNode;
}

And then pass alterNode to HTML component!

[wulaizi]

常量 alterNode  =  （れ） =>  {
  如果 （れ。的tagName  ===  “IMG” ） {
    常量 htmlAttribs  = れ。属性; 
    让 imageSrc  =  htmlAttribs吗？。名称 ||  htmlAttribs？。src ; 
    让 newImageUrl  =  RegHelper 。HandleImage （imageSrc ）; 
    domNode 。属性 =  { ... htmlAttribs ， src：newImageUrl  } ; 
  } 
  return  domNode ; 
}

然后传递alterNode给HTML组件！

Thank you very much for your answer, very nice, I have a requirement here, before the picture is loaded, use htmlAttribs?.src (preview) After loading, use htmlAttribs?.name, when you click on the picture, give the picture address to "react- native-image-zoom-viewer "may need a method to trigger an image click event

[wulaizi]

常量 alterNode  =  （れ） =>  {
  如果 （れ。的tagName  ===  “IMG” ） {
    常量 htmlAttribs  = れ。属性; 
    让 imageSrc  =  htmlAttribs吗？。名称 ||  htmlAttribs？。src ; 
    让 newImageUrl  =  RegHelper 。HandleImage （imageSrc ）; 
    domNode 。属性 =  { ... htmlAttribs ， src：newImageUrl  } ; 
  } 
  return  domNode ; 
}

然后传递alterNode给HTML组件！

Thank you very much for your answer, very nice, I have a requirement here, before the picture is loaded, use htmlAttribs?.src (preview) After loading, use htmlAttribs?.name, when you click on the picture, give the picture address to "react- native-image-zoom-viewer "may need a method to trigger an image click event

I chose “renderers” before because he can upload a "TouchableOpacity" trigger event, but when the renderers return the picture, because my picture is a high-definition large picture, using Image will cause blur, so I gave up using HTML img because the effect is very good, but I don’t know how to go. Trigger event method

[jsamr]

常量 alterNode  =  （れ） =>  {
  如果 （れ。的tagName  ===  “IMG” ） {
    常量 htmlAttribs  = れ。属性; 
    让 imageSrc  =  htmlAttribs吗？。名称 ||  htmlAttribs？。src ; 
    让 newImageUrl  =  RegHelper 。HandleImage （imageSrc ）; 
    domNode 。属性 =  { ... htmlAttribs ， src：newImageUrl  } ; 
  } 
  return  domNode ; 
}

然后传递alterNode给HTML组件！

Thank you very much for your answer, very nice, I have a requirement here, before the picture is loaded, use htmlAttribs?.src (preview) After loading, use htmlAttribs?.name, when you click on the picture, give the picture address to "react- native-image-zoom-viewer "may need a method to trigger an image click event

I understand your requirement. This is unfortunately not yet possible, but it is an interesting use case for the next version. I am thinking of an API that would look like this:

const renderers = {
  img: (...params) => {
    return (
      <ImageRenderer {...params}>
        {({ isLoading, width, height }) => {
          return; /** Whatever you need to return! */
        }}
      </ImageRenderer>
    );
  },
};

PS: If you are confused with the syntax, see react patterns, render prop

[jsamr]

@wulaizi You can now reuse the img component internal logic in the Foundry pre-release (6.0.0-alpha-15). See #430 for more information on how to try out this pre-release. Below is an example:

import React from 'react';
import {
  IMGElementContainer,
  IMGElementContentError,
  IMGElementContentSuccess,
  IMGElementContentLoading,
  useIMGElementProps,
  useIMGElementState,
  defaultHTMLElementModels
} from 'react-native-render-html';

const CustomImageRenderer = function ({ onPress, source, ...props }) {
  const imgElementProps = useIMGElementProps(props);
  const alteredProps = {
    ...imgElementProps,
    source: {
      uri: RegHelper.HandleImage(source.uri)
    }
  };
  const state = useIMGElementState(alteredProps);
  let content = false;
  if (state.type === 'success') {
    content = React.createElement(IMGElementContentSuccess, state);
  } else if (state.type === 'loading') {
    content = React.createElement(IMGElementContentLoading, state);
  } else {
    content = React.createElement(IMGElementContentError, state);
  }
  return (
    <IMGElementContainer onPress={onPress} style={state.containerStyle}>
      {content}
    </IMGElementContainer>
  );
};

CustomImageRenderer.model = defaultHTMLElementModels.img;

export default CustomImageRenderer;

You can therefore chose what to render depending on the internal state of this component. The fields accessible in the state will depend on state.type.