如何使用 React Native 展示HTML内容

html-css08

如何使用 React Native 展示HTML内容,第1张

React-Native是js编译原生运行在android和ios上,html是通过webview来展示,所以你需要下载webview的API

在react-native 里通常实现布局界面展示的叫“组件”,而实现一些功能的叫“API”。

API和组件都可以由第三方开发和发布,

webview 的API有:react-native-webview-js-context,react-native-webview-bridge,

react-native-html-webview

等,他们可以实现展示HTML内容React-Native是js编译原生运行在android和ios上,html是通过webview来展示,所以你需要下载webview的API

在react-native 里通常实现布局界面展示的叫“组件”,而实现一些功能的叫“API”。

API和组件都可以由第三方开发和发布,

webview 的API有:react-native-webview-js-context,react-native-webview-bridge,

react-native-html-webview

等,他们可以实现展示HTML内容

其实在html页面中,之所以会把你写的不想转换的html标签也转换了,就是因为标签中的<和>,只要你把这两个符号用代码替代掉,页面加载的时候就不会对这段代码解析了,在打开页面后就会出现你想要的效果,例子如下:

<pre>

<body>

a

</body>

</pre>

其中,<表示<,>表示>,其实>也可以不用替换,只要html页面加载时找不到<,>符号就不会起作用

<pre>标签主要是为了保留标签内部的格式(空格和换行符)用的,这样就不需要再使用其他的换行和空格符号格式化文本了

操作如下:

图像文件和http、html文件位于同一文件夹:只需输入图像文件的名称即可展示。

图像文件位于http、html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,点击即可展示。

图像文件位于http、html文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,点击即可展示。

http,html指的是路径,当我们需要在网页中插入图像等外部文件,此时就需要采用“路径”的方式来指定文件的位置。