官方推薦react-navigation的使用

看了官方文檔的導(dǎo)航器對(duì)比，發(fā)現(xiàn)現(xiàn)在主推的方案是一個(gè)單獨(dú)的導(dǎo)航庫react-navigation，據(jù)說它的使用十分簡單。我就寫個(gè)demo，試了一下。

一、主要構(gòu)成

按使用形式主要分三部分:
1 StackNavigator: 類似于普通的Navigator，屏幕上方導(dǎo)航欄
2 TabNavigator: 相當(dāng)于ios里面的TabBarController，屏幕下方的標(biāo)簽欄
3 DrawerNavigator: 抽屜效果，側(cè)邊滑出

二、使用

1.新建項(xiàng)目

react-native init ComponentDemo

2. 在應(yīng)用中安裝此庫

npm install --save react-navigation
安裝完發(fā)現(xiàn)是beta版本(v1.0.0-beta.7) ，竟然有坑?！一會(huì)兒我們會(huì)詳細(xì)說這個(gè)坑~

3.測(cè)試TabNavigator、StackNavigator和DrawerNavigator

（1）新建HomePage.js

import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Image
} from 'react-native';

import {
    StackNavigator,
    TabNavigator
} from 'react-navigation';

import ChatScreen from './ChatScreen';
import MinePage from './MinePage';

class HomePage extends React.Component{

    static navigationOptions={
        title: '首頁',//設(shè)置標(biāo)題內(nèi)容
        header:{
            backTitle: ' ',//返回按鈕標(biāo)題內(nèi)容（默認(rèn)為上一級(jí)標(biāo)題內(nèi)容）
        }
    }

    constructor(props) {
        super(props);
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text style={{padding:10}}>Hello, Navigation!</Text>
                <Button
                    onPress={() => navigate('Chat',{user:'Sybil'})}
                    title="點(diǎn)擊跳轉(zhuǎn)"/>
            </View>
        )
    }
}
const MainScreenNavigator = TabNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            tabBar: {
                label: '首頁',
                icon: ({tintColor}) => (
                    <Image
                        source={require('./image/bar_home_nomarl@3x.png')}
                        style={[{tintColor: tintColor},styles.icon]}
                    />
                ),
            },
        }
    },
    Certificate: {
        screen: MinePage,
        navigationOptions: {
            tabBar: {
                label: '我的',
                icon: ({tintColor}) => (
                    <Image
                        source={require('./image/bar_center_normal@3x.png')}
                        style={[{tintColor: tintColor},styles.icon]}
                    />
                ),
            },
        }
    },
}, {
    animationEnabled: false, // 切換頁面時(shí)不顯示動(dòng)畫
    tabBarPosition: 'bottom', // 顯示在底端，android 默認(rèn)是顯示在頁面頂端的
    swipeEnabled: false, // 禁止左右滑動(dòng)
    backBehavior: 'none', // 按 back 鍵是否跳轉(zhuǎn)到第一個(gè) Tab， none 為不跳轉(zhuǎn)
    tabBarOptions: {
        activeTintColor: '#008AC9', // 文字和圖片選中顏色
        inactiveTintColor: '#999', // 文字和圖片默認(rèn)顏色
        showIcon: true, // android 默認(rèn)不顯示 icon, 需要設(shè)置為 true 才會(huì)顯示
        indicatorStyle: {height: 0}, // android 中TabBar下面會(huì)顯示一條線，高度設(shè)為 0 后就不顯示線了
        style: {
            backgroundColor: '#fff', // TabBar 背景色
        },
        labelStyle: {
            fontSize: 12, // 文字大小
        },
    },
});

const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor:'#fff'
    },
    icon: {
        height: 22,
        width: 22,
        resizeMode: 'contain'
    }
});

const SimpleApp = StackNavigator({
    Home: {screen: MainScreenNavigator},
    Chat:{screen:ChatScreen},

});

export default SimpleApp;

（2）新建ChatScreen.js


import React from 'react';
import {
    Button,
    Image,
    View,
    Text
} from 'react-native';

class ChatScreen extends React.Component {
    static navigationOptions = {
        title:'聊天',
    };

    render() {
        const {params} = this.props.navigation.state;
        return (
        <View style={{backgroundColor:'#fff',flex:1}}>
            <Text style={{padding:20}}>Chat with {params.user}</Text>

        </View>

        );
    }
}
export default ChatScreen;

（3）新建MinePage.js

import React,{Component} from 'react';
import {
    Button,
    Image,
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
   DrawerNavigator
} from 'react-navigation';

import MyNotificationsScreen from './MyNotificationsScreen';

class MinePage extends Component{
    static navigationOptions = {
          title:'我的',
         drawerLabel: '我的',
        // Note: By default the icon is only shown on iOS. Search the  showIcon option below.
         drawerIcon: ({ tintColor }) => (
         <Image
             source={require('./image/chat@3x.png')}
            style={[styles.icon, {tintColor: tintColor}]}
         />
      ),
   };
    render(){;
        return(
            <View style={{backgroundColor:'#fff',flex:1}}>
                <Text style={{padding:20}}>Sybil</Text>
                <Button
                  style={{padding:20}}
                  onPress={() => this.props.navigation.navigate('DrawerOpen')}
                  title="點(diǎn)擊打開側(cè)滑菜單"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});


const MyChatNavigator = DrawerNavigator({
    MyChat: {
        screen: MinePage,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
},{
    drawerWidth: 220, // 抽屜寬
    drawerPosition: 'left', // 抽屜在左邊還是右邊
    // contentComponent: CustomDrawerContentComponent,  // 自定義抽屜組件
    contentOptions: {
        initialRouteName: MinePage, // 默認(rèn)頁面組件
        activeTintColor: '#008AC9',  // 選中文字顏色
        activeBackgroundColor: '#f5f5f5', // 選中背景顏色
        inactiveTintColor: '#000',  // 未選中文字顏色
        inactiveBackgroundColor: '#fff', // 未選中背景顏色
        style: {  // 樣式

        }
    }
});

export default MyChatNavigator;

（4）編寫MyNotificationsScreen.js

import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    Image
} from 'react-native';

class MyNotificationsScreen extends React.Component {
    static navigationOptions = {
        title:'通知',
        drawerLabel: '通知',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./image/notif@3x.png')}
                style={[styles.tabIcon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
             <View style={{backgroundColor:'#fff'}}>
                <Button
                    style={{padding:20}}
                    onPress={() => this.props.navigation.navigate('DrawerOpen')}
                    title="點(diǎn)擊打開側(cè)滑菜單"
                />
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="返回我的界面"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tabIcon: {
        width: 24,
        height: 24,
    },
});

export default MyNotificationsScreen;

（5）運(yùn)行
報(bào)錯(cuò)啦？這就是上面我們所說的坑~
什么原因呢？原來是測(cè)試版的bug，在目錄中找到node_modules/react-navigation/src/views/Header.js的第12行，刪除它就OK了~

Ps：遺憾的是這個(gè)錯(cuò)誤我沒有留圖啊~在我即將發(fā)表這篇文章的時(shí)候，最新版已經(jīng)變?yōu)?v1.0.0-beta.9)了，最新版已經(jīng)將上述的bug修改了！

好了，再次運(yùn)行~
上一個(gè)動(dòng)態(tài)效果圖：

QQ20170427-155140.gif

想詳細(xì)了解React Navigation，可以閱讀這一篇英文的入門文檔，希望對(duì)你們有所幫助~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容