ITPub博客

首页 > 应用开发 > Javascript > React Native Router Navigations(3)

React Native Router Navigations(3)

原创 Javascript 作者:cenfeng 时间:2019-07-10 18:07:33 0 删除 编辑

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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    60
  • 访问量
    40306