当前位置：首页 > 域名

React Native JSON解析和辅助函数(2)

appBody.js 这里 super 和 componentDidMount 是析和React内置函数。使用 super，辅助您可以初始化此值，函数并且 componentDidMount 首先是析和调用。

从 react 导入 React，辅助{ Component} ; 从 react-native 导入 { Text } ; 从 native-base 导入 { Content，函数Card，析和CardItem，辅助Body} ; 从 ./appBodyData 导入 AppBodyData ; export 默认类 AppBody 扩展了 Component { constructor （）{ super （） this。函数 state = { data：[] } } getData （）{ return fetch （ https://www.thewallscript.com/blogfeed/javascript/10 ）。析和然后（（response）=> response.json（））。辅助然后（（responseJson）=> { 此。函数的析和setState （{ 数据：responseJson.feed.entry}）; }）。捕捉（（误差）=> { 控制台。辅助错误（误差）; }）; } componentDidMount （）{ this。函数 getData （）; } render（）{ return （ < AppBodyData data = { this。 state .data} /> ）; } } 模块 .EXPORT = AppBody ;

appBodyData.js 此组件呈现所有JSON数据标题。

从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; 从 native-base 导入 { Content，Card，CardItem，云服务器提供商Body，Left} ; export default class AppBodyData extends Component { render（）{ let articles = this。道具 .data。 map （ function （ articleData ，index）{ return（ <Card> <CardItem> <Body> < Text > { articleData .title。$ t } </ Text > </ Body> </ CardItem> </ Card> ） }）; return（ <Content> { articles } </ Content> ）; } } 模块 .EXPORT = AppBodyData ;

安装React包 这个JSON提要包含HTML和不正确的数据，我们需要安装包/插件来改进它。 Time Ago 此包有助于将时间戳转换为时间前的文本。

$ npm install react-native-timeago --save

HTMLView将 HTML标记绑定到组件。

$ npm install react-native-htmlview --save

适合图像 对于不同的移动尺寸，您需要以响应式风格制作图像。

$ npm install react-native-fit-image --save

帮助程序功能 在 src 文件夹下创建文件目录。

helpers.js 这个文件包含两个函数， GetImage 是从HTML内容中过滤第一个图像源。 ContentSnippet 显示前50个单词。

导出函数 GetImage （content）{ var myRegexp = new RegExp（/< img .*? src="(. *? )"/）; var match = myRegexp。 exec （内容）; if（match）{ return match [1]; } } 导出功能 ContentSnippet （内容）{ 回报的内容。拆分（/ \ s + /）。服务器托管 切片（0,30）。加入（“”）+“......”; }

视频教程 - React Native Helper / Injectable Functions appBodyData.js 包含所有实现的最终代码。

从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; 从 react-native-htmlview 导入 HTMLView ; 从 react-native-timeago 导入 TimeAgo ; 从 react-native-fit-image 导入 FitImage ; 从 ../helpers/helpers 导入 { GetImage，ContentSnippet} ; 从 native-base 导入 { Content，Card，CardItem，Body，Left，Thumbnail，Button，Icon} ; export default class AppBodyData extends Component { render（）{ let articles = this。道具 .data。 map （ function （ articleData ，index）{ return（ <Card> <CardItem> <Left> <Thumbnail source = { require（../ img / SrinivasTamada.png）} /> <Body> < Text > { articleData 。标题。$ t } </ 文字 > </ Body> </ Left> </ CardItem> <CardItem> < FitImage source = { { uri：GetImage（articleData .content。$ t）}} /> </ CardItem> <CardItem content> < HTMLView value = { ContentSnippet（ articleData .content。$ t）} /> </ CardItem> <CardItem> <Button transparent> <Icon active name =“time”/> <文本> < TimeAgo time = { articleData .published。$ t} /> </ Text> </ Button> <Button transparent> <Icon active name =“chatbubbles”/> <Text> { articleData .thr $ total。$ t}评论 </ Text> </ Button> </ CardItem> </ Card> ） }）; 返回（ < 文章 } </ Content> ）; } } 模块 .EXPORT = AppBodyData ;

React Native JSON解析和辅助函数(2)

相关推荐

2023年中国模拟芯片行业市场规模及未来发展趋势预测分析

SSO单点登录重定向解决方案

如何通过Python用表情包自动回复微信拍一拍？

大文件上传：秒传、断点续传、分片上传

数据中心可持续发展的趋势

抽象类能实例化吗？口气很强硬的说：“不能”！