React-Native如何製作導航？ react-native導航條製作詳情（附完整程式碼）

本篇文章主要的介紹了關於react-native導航的功能，如何用react做成可以導航的呢，那就看下面的這篇文章吧

一、每個App 都少不了的導航功能

我們知道無論是底部Button 切換，還是頁面跳躍統稱為導航功能，有了這些功能，一個完整的App基本骨架才會出來，接下來才能用業務邏輯去填充整個骨架，在React-Native 中，Facebook 也推出過導航元件，但是，面對複雜的業務邏輯性能相對來說體驗較差，於是，第三方導覽元件 react-navigation 誕生了，Facebook 也建議使用這個元件，可見這個導覽元件能力超群，這個元件裡面主要包含三個核心功能元件：TabNavigator、StackNavigator、DrawerNavigation，分別實現的功能： Tab 導覽、頁面跳轉、抽屜效果（側滑選單），今天只記錄前兩個組件。

二、本次要實現的目標效果

#本次要實現的就是上面的兩張截圖效果，主介面底部有三個切換主介面導覽的Tab，首頁模擬給出一個進入二級頁面的入口，進入第二張截圖效果，接下來用程式碼實現。

三、react-navigation 初探使用TabNavigator

1.安裝

安裝：npm install –save react-navigation -save

#安裝完後查看package.json 檔案裡面dependencies 對應的值會多一個key-value 對應的react-navigation 和版本號：
也可以在根目錄下的node_modules 資料夾中查看 react- navigation 組件包，如果有基本上就可以確定安裝成功了。

2.路由配置

個人覺得RN 中的Tab 導航比Android 操作簡單，RN 是自己去設定好每個Tab 對應的頁面切換目標，一切都要自己去設定，基本框架配置好之後隨處可用，以下先攻克底部Tab 切換功能。 （想看更多就到PHP中文網React參考手冊欄位學習）

#介面分析：

#底部三個Tab 按鈕（使用TabNavigator 實作）
每個Tab 對應三個不同的頁面（需要準備三個頁面）

##根據上述簡單分析，我們先建立三個頁面，我自己取名字分別為：

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(&#39;./ic_tab_mine.png&#39;)}/>
    };
    render() {        const { navigate } = this.props.navigation;        return (
            <View style={styles.container}>
                <Text>首页界面</Text>
            </View>
        );
    }
}const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: &#39;#F5FCFF&#39;,
    },
});

其他兩個頁面以此類推。

頁面準備完之後，接下來建立Tab 導航路由設定文件，命名：

MyNavigators.js

import 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)
    });

註冊TabNavigator 接收兩個參數（Tab 目標頁面，tab 的一些樣式）

，目標頁面將剛剛準備好的匯入即可，樣式可依需求定義。

設定頁面元件堆疊路由功能 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/>
        );
    }
}

修改 index.js 文件，讓程式啟動後去載入 App.js 檔案。 ###

import { AppRegistry } from 'react-native';import App from './App';
AppRegistry.registerComponent('AbcAPP', () => App);

###現在去執行程式即可看到底部導覽 Tab 已經載入出來。 ######三、react-navigation 初探使用StackNavigator 二級頁面跳轉######只要在 StackNavigator 註冊過的元件，都會有這個屬性navigation，而這個屬性裡面有個navigate（str,prm ）方法,第一個參數是目標元件名稱（###名稱是在路由設定檔註冊是自訂的名字，別和檔名搞混了###）第二個參數可傳可不傳，如果兩個頁面元件要通信，例如帶參跳轉時，可以用第二參數傳值，格式key-value。例如效果圖那樣：######MainPage.js 檔案###

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(&#39;./ic_tab_mine.png&#39;)}/>
    };
    render() {        // 获取 navigate 属性
        const { navigate } = this.props.navigation;        return (
            <View style={styles.container}>                // 跳转到详情页，并传递两个数据 title、des。
                <TouchableOpacity style={{width:200,height: 50, backgroundColor: &#39;red&#39;, borderRadius:5,justifyContent: &#39;center&#39;, alignItems: &#39;center&#39;}}
                                  onPress={() => navigate(&#39;DetailsPage&#39;, { title: &#39;详情页&#39;,des:&#39;回到上一页&#39; })} >
                    <Text style={{color:"#FFF"}}>点击查看详情</Text>
                </TouchableOpacity>
            </View>
        );
    }
}const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: &#39;#F5FCFF&#39;,
        justifyContent: &#39;center&#39;,
        alignItems: &#39;center&#39;
    },
});

###DetailsPage.js 檔案（記得在MyNavigators.js 註冊詳情頁元件）###

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: &#39;#000&#39;, fontSize: 18}}>编辑</Text></View>,
        headerBackTitle: &#39;回去&#39;,
        headerTruncatedBackTitle: &#39;返回&#39;
    });    // 点击返回上一页方法
    backFunction= () => {        //返回首页方法 navigation属性中的自带的返回方法
        this.props.navigation.goBack();
    }
    render() {        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={{width:200,height: 50, backgroundColor: &#39;green&#39;, borderRadius:5,justifyContent: &#39;center&#39;, alignItems: &#39;center&#39;}}
                    onPress={() => {                        this.backFunction()
                    }}>
                    <Text style={{color:"#FFF"}}>{this.props.navigation.state.params.des}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({    container: {
        flex: 1,
        backgroundColor: &#39;#F5FCFF&#39;,
        alignItems:&#39;center&#39;,
        justifyContent:&#39;center&#39;
    },
});

###記錄完畢，以上使用到的屬性值、樣式等等可以網路上自行百度。最後給出專案結構目錄： ############

這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是React-Native如何製作導航？ react-native導航條製作詳情（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！