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

发布时间：2020-12-15 09:35:50 所属栏目：百科来源：网络整理

导读：appBody.js 这里 super 和 componentDidMount 是React内置函数。使用 super，您可以初始化此值，并且 componentDidMount 首先是调用。从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; 从 ‘ native-base ‘ 导入 {Con

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 ;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!