官方推薦react-navigation的具體使用詳解

更新時間：2018年05月08日 15:06:20 作者：其實我很乖乖

本篇文章主要介紹了官方推薦react-navigation的具體使用詳解，react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。非常具有實用價值，需要的朋友可以參考下

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

一、主要構(gòu)成

按使用形式主要分三部分:

StackNavigator: 類似于普通的Navigator，屏幕上方導(dǎo)航欄
TabNavigator: 相當于ios里面的TabBarController，屏幕下方的標簽欄
DrawerNavigator: 抽屜效果，側(cè)邊滑出

二、使用

1.新建項目

react-native init ComponentDemo

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

npm install --save react-navigation

安裝完發(fā)現(xiàn)是beta版本(v1.0.0-beta.7) ，竟然有坑?！一會兒我們會詳細說這個坑~

3.測試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è)置標題內(nèi)容
    header:{
      backTitle: ' ',//返回按鈕標題內(nèi)容（默認為上一級標題內(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="點擊跳轉(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, // 切換頁面時不顯示動畫
  tabBarPosition: 'bottom', // 顯示在底端，android 默認是顯示在頁面頂端的
  swipeEnabled: false, // 禁止左右滑動
  backBehavior: 'none', // 按 back 鍵是否跳轉(zhuǎn)到第一個 Tab， none 為不跳轉(zhuǎn)
  tabBarOptions: {
    activeTintColor: '#008AC9', // 文字和圖片選中顏色
    inactiveTintColor: '#999', // 文字和圖片默認顏色
    showIcon: true, // android 默認不顯示 icon, 需要設(shè)置為 true 才會顯示
    indicatorStyle: {height: 0}, // android 中TabBar下面會顯示一條線，高度設(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="點擊打開側(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, // 默認頁面組件
    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="點擊打開側(cè)滑菜單"
        />
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="返回我的界面"
        />
      </View>
    );
  }
}

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

export default MyNotificationsScreen;

（5）運行

報錯啦？這就是上面我們所說的坑~

什么原因呢？原來是測試版的bug，在目錄中找到node_modules/react-navigation/src/views/Header.js的第12行，刪除它就OK了~

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

好了，再次運行~

上一個動態(tài)效果圖：