React Native Router Navigations(3)

cenfeng發表於2019-07-10

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

相關文章