您的位置：首页 > Web前端 > React

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

2019-07-15 16:27 1271 查看

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 ;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航