反应本机模板设计入门（2）

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（                                           

  


         



                         
                            <  Text  >  
                                 {  articleData  .title。$ t  } 
                            Text  >  
                          
                      
                  
                ） 
            }）;  

        return（ 
              
                 {  articles  } 
              

        ）;  

    }  
}  
模块  .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（ 
                      
                          
                              
   
                                 
                                     <  Text  >  {  articleData 。标题。$ t  }  文字 >  
                                  
                              
                          
                          
<  FitImage  source = {{uri： GetImage （ articleData  .content。$ t）}} /> 
                          
                          
         
<  HTMLView  value = { ContentSnippet（ articleData  .content。$ t）} /> 
                          
                          
                              
                                 
                                <文本> 
<  TimeAgo  time = {  articleData  .published。$ t} /> 
                                 
                              
                              
                                  
                                  
                               {  articleData  .thr $ total。$ t}评论 
                                  
                              
                          
                      
                ） 
            }）;  

        返回（ 
            < 
                 文章 } 
              
        ）;  

    }  
}  
模块  .EXPORT =   AppBodyData  ;