这里 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 ;