ITPub博客

首页 > 应用开发 > Javascript > React Native JSON解析和辅助函数(2)

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

原创 Javascript 作者:cenfeng 时间:2019-07-10 18:05:46 0 删除 编辑

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  ;


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69933200/viewspace-2650157/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    60
  • 访问量
    40354