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;
