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
;
