本篇文章主要的介紹了關於react-native導航的功能，如何用react做成可以導航的呢，那就看下面的這篇文章吧
我們知道無論是底部Button 切換，還是頁面跳躍統稱為導航功能，有了這些功能，一個完整的App基本骨架才會出來，接下來才能用業務邏輯去填充整個骨架，在React-Native 中，Facebook 也推出過導航元件，但是，面對複雜的業務邏輯性能相對來說體驗較差，於是，第三方導覽元件 react-navigation 誕生了，Facebook 也建議使用這個元件，可見這個導覽元件能力超群，這個元件裡面主要包含三個核心功能元件：TabNavigator、StackNavigator、DrawerNavigation，分別實現的功能： Tab 導覽、頁面跳轉、抽屜效果（側滑選單），今天只記錄前兩個組件。
#本次要實現的就是上面的兩張截圖效果，主介面底部有三個切換主介面導覽的Tab，首頁模擬給出一個進入二級頁面的入口，進入第二張截圖效果，接下來用程式碼實現。
安裝：npm install –save react-navigation -save
#安裝完後查看package.json 檔案裡面dependencies 對應的值會多一個key-value 對應的react-navigation 和版本號：
也可以在根目錄下的node_modules 資料夾中查看 react- navigation 組件包，如果有基本上就可以確定安裝成功了。
個人覺得RN 中的Tab 導航比Android 操作簡單，RN 是自己去設定好每個Tab 對應的頁面切換目標，一切都要自己去設定，基本框架配置好之後隨處可用，以下先攻克底部Tab 切換功能。 （想看更多就到PHP中文網React參考手冊欄位學習）
#介面分析：
##根據上述簡單分析，我們先建立三個頁面，我自己取名字分別為：
MainPage、SettingPage、MinePage，分別對應：首頁，設定，我的。
MainPage.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
TouchableOpacity
} from 'react-native';
export default class MinePage extends Component {
// 此处设置 Tab 的名称和一些样式，这里的会覆盖掉配置路由文件的样式，下面会讲
static navigationOptions = {
headerTitle: '首页',
tabBarLabel: '首页',
tabBarIcon:<Image style={{height: 30, width: 30}}
source={require('./ic_tab_mine.png')}/>
};
render() { const { navigate } = this.props.navigation; return (
<View style={styles.container}>
<Text>首页界面</Text>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});其他兩個頁面以此類推。
頁面準備完之後，接下來建立Tab 導航路由設定文件，命名：
MyNavigators.jsimport React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';
import MainPage from '../pages/MainPage'; // 首页import SettingPage from '../pages/SettingPage'; // 设置页面import MinePage from '../pages/MinePage'; // 我的页面import DetailsPage from '../pages/DetailsPage'; // 详情页// 注册tabsconst Tabs = TabNavigator({
Home: {
screen: MainPage,
},
Set: {
screen: SettingPage,
},
Me: {
screen: MinePage,
}
}, {
animationEnabled: false, // 切换页面时是否有动画效果
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: false, // 是否可以左右滑动切换tab
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
activeTintColor: '#ff8500', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片未选中颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
height: 0 // 如TabBar下面显示有一条线，可以设高度为0后隐藏
},
style: {
backgroundColor: '#fff', // TabBar 背景色
},
labelStyle: {
fontSize: 14, // 文字大小
},
},
});
export default StackNavigator({
Main: {
screen: Tabs
},
DetailsPage: { // 详情页
screen: DetailsPage
},
},
{
headerMode: 'screen', // 标题导航
initialRouteName: 'Main', // 默认先加载的页面组件
mode: 'modal' // 定义跳转风格(card、modal)
});，目標頁面將剛剛準備好的匯入即可，樣式可依需求定義。
設定頁面元件堆疊路由功能 StackNavigator，注意，這裡要將 App 中所有的頁面元件全部配置到這裡來，就好比 Android 中的 manifest 檔案中註冊所有的 activity 一樣。 再注意：Tab 作為一個整體元件，要以頁面元件的形式將對應的所有頁面配置到這裡。
開始使用，為了提高專案程式碼邏輯可讀性，我先單獨建立了一個 App.js 文件，然後單獨放入我剛剛建立的路由元件。 
import React, {Component} from 'react';import MyNavigators from './src/navigators/MyNavigators';
export default class App extends Component {
render() { return ( // 路由组件
<MyNavigators/>
);
}
}import { AppRegistry } from 'react-native';import App from './App';
AppRegistry.registerComponent('AbcAPP', () => App);import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
export default class MainPage extends Component {
static navigationOptions = { // headerTitle:'首页',
tabBarLabel: '首页', // headerTitleStyle:{
// fontSize:18,
// fontWeight:'400',
// alignSelf:'center',
// },
headerStyle: {
height: 0, //去掉标题
},
tabBarIcon:<Image style={{height: 30, width: 30}}
source={require('./ic_tab_mine.png')}/>
};
render() { // 获取 navigate 属性
const { navigate } = this.props.navigation; return (
<View style={styles.container}> // 跳转到详情页，并传递两个数据 title、des。
<TouchableOpacity style={{width:200,height: 50, backgroundColor: 'red', borderRadius:5,justifyContent: 'center', alignItems: 'center'}}
onPress={() => navigate('DetailsPage', { title: '详情页',des:'回到上一页' })} >
<Text style={{color:"#FFF"}}>点击查看详情</Text>
</TouchableOpacity>
</View>
);
}
}const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
justifyContent: 'center',
alignItems: 'center'
},
});import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class DetailsPage extends Component {
//接收上一个页面传过来的title显示出来
static navigationOptions = ({navigation}) => ({
headerTitle: navigation.state.params.title,
headerTitleStyle:{
fontSize:18,
fontWeight:'400',
alignSelf:'center'
},
headerStyle: {height: 65, backgroundColor: '#FFF'},
headerRight: <View><Text style={{paddingRight: 14, color: '#000', fontSize: 18}}>编辑</Text></View>,
headerBackTitle: '回去',
headerTruncatedBackTitle: '返回'
}); // 点击返回上一页方法
backFunction= () => { //返回首页方法 navigation属性中的自带的返回方法
this.props.navigation.goBack();
}
render() { return (
<View style={styles.container}>
<TouchableOpacity
style={{width:200,height: 50, backgroundColor: 'green', borderRadius:5,justifyContent: 'center', alignItems: 'center'}}
onPress={() => { this.backFunction()
}}>
<Text style={{color:"#FFF"}}>{this.props.navigation.state.params.des}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems:'center',
justifyContent:'center'
},
});這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。
以上是React-Native如何製作導航？ react-native導航條製作詳情（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
