React Native Router Navigations(3)

cenfeng發表於2019-07-10
React NativeNavigation

about.js
這是about page的元件結構。 這裡的內容取自“原生基地”

從  '  react  '  匯入  React，{Component}  ;  從   '  react-native  ' 
匯入   {Text}   ;  從   '  native-base  '  匯入   {Content}   ;  export  default class  關於 extends Component {    constructor（）{    }  render （）{  return （ <Content>        </ Content>      ）;    }  }  模組。 export  =  關於  ;




    

  
    
      
    






news.js
按照以下程式碼建立新聞元件。

React Native Router Navigations


安裝路由器包
按照此命令安裝路由包。 確保重新啟動react本機伺服器。

$  npm  install  react-native-router-flux  --save


index.ios.js
匯入和新聞頁面到indes.ios.js。 還從react-native-router-flux匯入路由器。 在路由器內部提到您正在使用的所有元件。 這裡appBody指的是feed元件，你可以將appBody重新命名為feed。

從   '  react  '  匯入   React，{Component}   ;  從   '  react-native  ' 
匯入   {AppRegistry，View，Text}   ;  從   '  native-base  '  匯入   {Container，StyleProvider，Header，Left，Right，Icon，Button，Body}   ;  從  './src/themes/components'  匯入   getTheme   ;  從   './src/themes/variables/nineLessons'  匯入   nineLessons   ;  從   '  ./src/components/appHeader  '  匯入   AppHeader   ;  從   '  匯入  AppFooter   '





./src/components/appFooter  ';  從   '  ./src/components/appBody  ' 
匯入   appBody   ;  從  '  ./src/components/pages/news  '  匯入 新聞 ;  從  ' ./src/components/pages/about  '  匯入 關於 ;  從  '  react-native-router-flux  '  匯入 {Router，Scene}  ;  export  default class  ReactNativeBlogApp  extends Component {    render（）{      return（ <StyleProvider style = {getTheme（nineLessons）}>          <Container>  <Router>








      

         
              <Scene key =“root”>  <Scene key =“feed”component = {  appBody  } title =“Feed”/>  <Scene key =“about”component = {  About  } title =“About”/>  <Scene key = “news”component = {  News  } title =“News”/>  </ Scene>  </ Router>            <AppFooter />          </ Container>        </ StyleProvider>      ）;    }  } AppRegistry.registerComponent（ 'ReactNativeBlogApp'，（）=> ReactNativeBlogApp）;
              
             
              
            
          








appFooter.js
在appFooter.js中，將所有元件包含在應用程式頁尾部分的選項卡按鈕中。

從   '  react  '  匯入   React，{Component}   ;  從   '  react-native  ' 
匯入   {Image，StyleSheet}   ;  從   '  native-base  '  匯入   {Footer，FooterTab，Icon，Button，Text}   ;  從   '  react-native-router-flux  '  匯入   {Actions}   ;  export  default class  AppFooter  extends Component {  constructor （）{    }  render （）{  return （ <Footer>          <FooterTab>            <Button active  onPress




  


  
    
     

= {  Actions  .feed}> <Icon name =“ios-egg”/> 
            <Text> Feed </ Text> 
          </ Button> 
          <Button   onPress  = {  Actions  .news}> <Icon name =“paper”/> 
            <文字>新聞</ Text> 
          </ Button> 
          <按鈕   onPress  = {  Actions  .about}> <Icon name =“contact”/> 
            <Text>關於</ Text> 
          </ Button> 
        </ FooterTab> 
      </ Footer>
    ）; 
  } 
} 

模組。 export  =  AppFooter  ;



多個操作
還包括appFooter.js中的以下程式碼。 當按下或啟用任何標籤按鈕時，相應地呼叫該方法。

tabAction （tab）{ 
    if（tab ==='  feed  '）{ 
      Actions。 feed （）; 
    } else if（tab ==='  news  '）{ 
      Actions。 新聞 （）; 
    } else { 
      動作。 約 （）; 
    } 
  }



函式呼叫
下面是通過按頁尾下面的3個選項卡中的任何一個來呼叫tabAction方法所包含的行。

<按鈕啟用 onPress  = {（）=> {this。 tabAction （'  feed  '）}}> 
       <Icon name =“ios-egg”/> 
       <Text> Feed </ Text> 
</ Button>


使用“活動”選項卡
在建構函式方法中包含此程式碼，以啟用您按下的選項卡。

constructor （）{ 
     super （）; 
    這個。 state  = { 
      activeTabName：'  feed  ' 
    }; 
  }



繫結狀態值
下面的程式碼是觸發我們選擇的選項卡操作。

<Button active = {（this.state.activeTabName ===“feed”）？ true：“”} 
      onPress  = {（）=> {this。 tabAction （'  feed  '）}}> 
      <Icon name =“ios-egg”/> 
      <Text> Feed </ Text> 
</ Button>


最終程式碼
這是使用react native導航到不同頁面的最終程式碼。

從   '  react  '  匯入   React，{Component}   ;  從   '  react-native  ' 
匯入   {Image，StyleSheet}   ;  從   '  native-base  '  匯入   {Footer，FooterTab，Icon，Button，Text}   ;  從   '  react-native-router-flux  '  匯入   {Actions}   ;  export  default class  AppFooter  extends Component {  constructor （）{  super （）;      這個。 state  = {        activeTabName： 'feed'      };    }





  
    





   tabAction （tab）{ 
     this。 setState （{activeTabName：tab}）; 
     if（tab ==='  feed  '）{ 
      Actions。 feed （）; 
    } else if（tab ==='  news  '）{ 
      Actions。 新聞 （）; 
    } else { 
      動作。 約 （）; 
    } 
  } 

  渲染（）{ 
    回報（
      <頁尾> 
        <FooterTab>
           <按鈕
            。活性= {（此 狀態  .activeTabName === “進料”）成立：？ “”} 
             onPress  = {（）=> {此。 tabAction （ '喂'）}}>
            <圖示名稱= “IOS-蛋”/> 
            <文字>訂閱</文字> 
          </按鈕> 
          <按鈕
            活性= {（此。 狀態  .activeTabName === “新聞”）？ true：“”} 
             onPress   = {（）=> {this。 tabAction （ '新聞'）}}> 
            <圖示名稱= “檔案”/> 
            <文字>新聞</文字> 
          </按鈕> 
          <按鈕
            啟用= {（這一點。 狀態  .activeTabName === “約”）？ true：“”} 
             onPress   = {（）=> {this。 tabAction （'about'）}}> 
            <


        </ FooterTab> 
      </ Footer>
    ）; 
  } 
} 

模組。 export  = AppFooter;


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2650158/，如需轉載，請註明出處，否則將追究法律責任。

相關文章