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