React Native Router Navigations(3)

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本机服务器。

$  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;

很赞哦!（76）