在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:jsdf/react-native-htmlview开源软件地址:https://github.com/jsdf/react-native-htmlview开源编程语言:JavaScript 97.0%开源软件介绍:React Native HTMLViewA component which takes HTML content and renders it as native views, with customisable style and handling of links, etc. In action (from ReactNativeHackerNews): Table of contentsInstall
Usageprops:
Exampleimport React from 'react';
import {StyleSheet} from 'react-native';
import HTMLView from 'react-native-htmlview';
class App extends React.Component {
render() {
const htmlContent = `<p><a href="http://jsdf.co">♥ nice job!</a></p>`;
return (
<HTMLView
value={htmlContent}
stylesheet={styles}
/>
);
}
}
const styles = StyleSheet.create({
a: {
fontWeight: '300',
color: '#FF3366', // make links coloured pink
},
}); Custom Link HandlingWhen a link is clicked, by default class App extends React.Component {
render() {
return (
<HTMLView
value={this.props.html}
onLinkPress={(url) => console.log('clicked link: ', url)}
/>
);
}
} If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first. Custom Element RenderingYou can implement the For example, here is how you might implement the function renderNode(node, index, siblings, parent, defaultRenderer) {
if (node.name == 'iframe') {
const a = node.attribs;
const iframeHtml = `<iframe src="${a.src}"></iframe>`;
return (
<View key={index} style={{width: Number(a.width), height: Number(a.height)}}>
<WebView source={{html: iframeHtml}} />
</View>
);
}
}
const htmlContent = `
<div>
<iframe src="http://info.cern.ch/" width="360" height="300" />
</div>
`;
class App extends React.Component {
render() {
return (
<HTMLView value={htmlContent} renderNode={renderNode} />
);
}
} Alternatively, this example shows how you could disallow the function renderNode(node, index, siblings, parent, defaultRenderer) {
if (node.name == 'iframe') {
return null;
}
}
const htmlContent = `
<div>
<iframe src="http://info.cern.ch/" width="360" height="300" />
</div>
`;
class App extends React.Component {
render() {
return (
<HTMLView value={htmlContent} renderNode={renderNode} />
);
}
} If you want to reuse the default renderer, you need to call it passing an array of nodes. This example shows how to replace a specific HTML tag with something different, but still process the children. function renderNode(node, index, siblings, parent, defaultRenderer) {
if (node.name == 'mytag') {
const specialSyle = node.attribs.style
return (
<Text key={index} style={specialSyle}>
{defaultRenderer(node.children, parent)}
</Text>
)
}
}
const htmlContent = `
<div>
<mytag>
<div>some content processed normally by the engine</div>
</mytag>
</div>
`;
class App extends React.Component {
render() {
return (
<HTMLView value={htmlContent} renderNode={renderNode} />
);
}
} For further understanding of the possiblities of the Customizing things even furtherIn addition to supplying a custom ChangelogSee CHANGELOG.md. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论