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 文件夹 下创建文件目录 。 

反应本机模板设计入门(2)-LMLPHP


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  ;
12-18 12:54