newNavigation.gif

通過(guò)以上的效果圖，其實(shí)我們可以看出使用react-navigation沒(méi)有出現(xiàn)卡頓的情況，在運(yùn)行的時(shí)候也很流暢。那么一步步來(lái)。先來(lái)看一下，TabNavigator如何實(shí)現(xiàn)。

TabNavigator

步驟

先導(dǎo)入import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation';

我們知道每個(gè)頁(yè)面都是一個(gè)class。然后通過(guò)render()渲染頁(yè)面。定義這個(gè)頁(yè)面。有哪些屬性呢？

screen：和導(dǎo)航的功能是一樣的，對(duì)應(yīng)界面名稱(chēng)，可以在其他頁(yè)面通過(guò)這個(gè)screen傳值和跳轉(zhuǎn)。  
  
  
navigationOptions：配置TabNavigator的一些屬性  
  
title：標(biāo)題，會(huì)同時(shí)設(shè)置導(dǎo)航條和標(biāo)簽欄的title  
  
tabBarVisible：是否隱藏標(biāo)簽欄。默認(rèn)不隱藏(true)  
  
tabBarIcon：設(shè)置標(biāo)簽欄的圖標(biāo)。需要給每個(gè)都設(shè)置  
  
tabBarLabel：設(shè)置標(biāo)簽欄的title。推薦  
  
導(dǎo)航欄配置  
  
tabBarPosition：設(shè)置tabbar的位置，iOS默認(rèn)在底部，安卓默認(rèn)在頂部。（屬性值：'top'，'bottom'）  
  
swipeEnabled：是否允許在標(biāo)簽之間進(jìn)行滑動(dòng)  
  
animationEnabled：是否在更改標(biāo)簽時(shí)顯示動(dòng)畫(huà)  
  
lazy：是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽，而不是提前，意思是在app打開(kāi)的時(shí)候?qū)⒌撞繕?biāo)簽欄全部加載，默認(rèn)false,推薦為true  
  
trueinitialRouteName： 設(shè)置默認(rèn)的頁(yè)面組件  
  
backBehavior：按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁(yè))， none 為不跳轉(zhuǎn)  
  
tabBarOptions：配置標(biāo)簽欄的一些屬性iOS屬性  
  
activeTintColor：label和icon的前景色 活躍狀態(tài)下  
  
activeBackgroundColor：label和icon的背景色 活躍狀態(tài)下  
  
inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下  
  
inactiveBackgroundColor：label和icon的背景色 不活躍狀態(tài)下  
  
showLabel：是否顯示label，默認(rèn)開(kāi)啟 style：tabbar的樣式  
  
labelStyle：label的樣式安卓屬性  
  
activeTintColor：label和icon的前景色 活躍狀態(tài)下  
  
inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下  
  
showIcon：是否顯示圖標(biāo)，默認(rèn)關(guān)閉  
  
showLabel：是否顯示label，默認(rèn)開(kāi)啟 style：tabbar的樣式  
  
labelStyle：label的樣式 upperCaseLabel：是否使標(biāo)簽大寫(xiě)，默認(rèn)為true  
  
pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）  
  
pressOpacity：按壓標(biāo)簽的透明度變化（安卓版本需要小于5.0）  
  
scrollEnabled：是否啟用可滾動(dòng)選項(xiàng)卡 tabStyle：tab的樣式  
  
indicatorStyle：標(biāo)簽指示器的樣式對(duì)象（選項(xiàng)卡底部的行）。安卓底部會(huì)多出一條線，可以將height設(shè)置為0來(lái)暫時(shí)解決這個(gè)問(wèn)題  
  
labelStyle：label的樣式  
  
iconStyle：圖標(biāo)樣式 

在ios是底層，在android是頂層。如何調(diào)整一致呢？tabBarPosition可以設(shè)置top 或者 bottom。

tabBarIcon: ({ tintColor }) => (
  <Image
    source={require('../img/gouwu.png')}
    style={[styles.icon, {tintColor: tintColor}]}
  />
),

tabBarIcon設(shè)置圖標(biāo)。

定義TabNavigation

const TabNavigation = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

定義一個(gè)展示的的TabNav。

export default class TabNav extends React.Component{
    static navigationOptions = {
        title:'TabNav',
};
    render(){
        return(
           
                <TabNavigation />
                
       
        );
    }
}

這樣就可以展示出TabNavigation

DrawerNavigator

這是一個(gè)抽屜導(dǎo)航。效果如下：

實(shí)現(xiàn)的代碼。其實(shí)和Tab差不多，只不過(guò)，我們需要設(shè)置的屬性有所差異，這這里，要設(shè)置drawerLabel，drawerIcon，其實(shí)屬性不止這些，還有更多的設(shè)置的屬性

DrawerNavigatorConfig  

drawerWidth - 抽屜的寬度  

drawerPosition - 選項(xiàng)是左或右。 默認(rèn)為左側(cè)位置  

contentComponent - 用于呈現(xiàn)抽屜內(nèi)容的組件，例如導(dǎo)航項(xiàng)。 接收抽屜的導(dǎo)航。 默認(rèn)為DrawerItems  

contentOptions - 配置抽屜內(nèi)容  

initialRouteName - 初始路由的routeName  

order - 定義抽屜項(xiàng)目順序的routeNames數(shù)組。  

路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設(shè)置的路徑。  

backBehavior - 后退按鈕是否會(huì)切換到初始路由？ 如果是，設(shè)置為initialRoute，否則為none。 默認(rèn)為initialRoute行為  

DrawerItems的contentOptions屬性  

activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色  

activeBackgroundColor - 活動(dòng)標(biāo)簽的背景顏色  

inactiveTintColor - 非活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色  

inactiveBackgroundColor - 非活動(dòng)標(biāo)簽的背景顏色  

內(nèi)容部分的樣式樣式對(duì)象  
labelStyle - 當(dāng)您的標(biāo)簽是字符串時(shí)，要覆蓋內(nèi)容部分中的文本樣式的樣式對(duì)象  

貼出源碼?？梢愿玫膮⒖?。

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('../img/gouwu.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
     <View>
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
      <Button 
        onPress={()=>this.props.navigation.navigate('DrawerOpen')}
        title="open the draw"
      />
      </View>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('../img/quan.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
        <View>
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />

       <Button 
        onPress={()=>this.props.navigation.navigate('DrawerOpen')}
        title="open the draw"
      />
      </View>
    );
  }
}

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

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});
export default class DrawNav extends React.Component {  
  static navigationOptions={
      title:'app',
      gesturesEnabled:false,
      header:null,
  }

  render() {  
        return (  
            <View style = {{flex:1,marginTop:20,}}>
                {/*<TouchableOpacity onPress = {this.open.bind(this)}>
                    <Image source = {require('../img/bianji.png')} style = {{width:36,height:36}}/>
                </TouchableOpacity>*/}
          <MyApp />  
          </View>
        );  
  }  
}  

打開(kāi)抽屜的方法

  //打開(kāi)的方法
  open(){
      this.props.navigation.navigate('DrawerOpen');
  }

關(guān)閉抽屜的方法

     //關(guān)閉的方法
     close(){
        this.props.navigation.navigate('DrawerClose');
     }

在實(shí)際的應(yīng)用中，我們就可以通過(guò)圖片等方式來(lái)實(shí)現(xiàn)打開(kāi)或者關(guān)閉抽屜導(dǎo)航。

總結(jié)

項(xiàng)目中一開(kāi)始使用的是navigator。習(xí)慣傳值push，回調(diào)的pop。老實(shí)說(shuō)一開(kāi)始相對(duì)比較地址react-navigation,但是在自己嘗試做了幾個(gè)這樣demo之后，我也有了重構(gòu)自己代碼的想法。希望通過(guò)react-navigation來(lái)實(shí)現(xiàn)切換的更加流暢。
其實(shí)react-navigation看似復(fù)雜，但是實(shí)現(xiàn)簡(jiǎn)單的一些東西，他反而更加簡(jiǎn)單，

StackNavigator

我們實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)的時(shí)候，navigate ‘xxx‘跳轉(zhuǎn)的頁(yè)面，后面{}，是傳遞的參數(shù)，參數(shù)值，或者回調(diào)函數(shù)。

 const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
    Dsome:{screen:Dsome},
});

TabNavigator
需要定義TabNavigator，然后React，和All都需要渲染和定義

const TabNavigation = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

DrawerNavigator

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

趕緊的，配合一些必要的屬性，去實(shí)現(xiàn)react-navigation的功能吧。