React Native JSON解析和輔助函式(2)

cenfeng發表於2019-07-10
React NativeJSON函式

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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章