newNavigation.gif
通過以上的效果圖，其實我們可以看出使用react-navigation沒有出現卡頓的情況，在運行的時候也很流暢。那么一步步來。先來看一下，TabNavigator如何實現。
TabNavigator
步驟
先導入import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation';
我們知道每個頁面都是一個class。然后通過render()渲染頁面。定義這個頁面。有哪些屬性呢？
screen：和導航的功能是一樣的，對應界面名稱，可以在其他頁面通過這個screen傳值和跳轉。
navigationOptions：配置TabNavigator的一些屬性
title：標題，會同時設置導航條和標簽欄的title
tabBarVisible：是否隱藏標簽欄。默認不隱藏(true)
tabBarIcon：設置標簽欄的圖標。需要給每個都設置
tabBarLabel：設置標簽欄的title。推薦
導航欄配置
tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）
swipeEnabled：是否允許在標簽之間進行滑動
animationEnabled：是否在更改標簽時顯示動畫
lazy：是否根據需要懶惰呈現標簽，而不是提前，意思是在app打開的時候將底部標簽欄全部加載，默認false,推薦為true
trueinitialRouteName： 設置默認的頁面組件
backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉
tabBarOptions：配置標簽欄的一些屬性iOS屬性
activeTintColor：label和icon的前景色 活躍狀態下
activeBackgroundColor：label和icon的背景色 活躍狀態下
inactiveTintColor：label和icon的前景色 不活躍狀態下
inactiveBackgroundColor：label和icon的背景色 不活躍狀態下
showLabel：是否顯示label，默認開啟 style：tabbar的樣式
labelStyle：label的樣式安卓屬性
activeTintColor：label和icon的前景色 活躍狀態下
inactiveTintColor：label和icon的前景色 不活躍狀態下
showIcon：是否顯示圖標，默認關閉
showLabel：是否顯示label，默認開啟 style：tabbar的樣式
labelStyle：label的樣式 upperCaseLabel：是否使標簽大寫，默認為true
pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）
pressOpacity：按壓標簽的透明度變化（安卓版本需要小于5.0）
scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式
indicatorStyle：標簽指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設置為0來暫時解決這個問題
labelStyle：label的樣式
iconStyle：圖標樣式
在ios是底層，在android是頂層。如何調整一致呢？tabBarPosition可以設置top 或者 bottom。
tabBarIcon: ({ tintColor }) => (
<Image
source={require('../img/gouwu.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
tabBarIcon設置圖標。
定義TabNavigation
const TabNavigation = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
定義一個展示的的TabNav。
export default class TabNav extends React.Component{
static navigationOptions = {
title:'TabNav',
};
render(){
return(
<TabNavigation />
);
}
}
這樣就可以展示出TabNavigation
DrawerNavigator
這是一個抽屜導航。效果如下：
實現的代碼。其實和Tab差不多，只不過，我們需要設置的屬性有所差異，這這里，要設置drawerLabel，drawerIcon，其實屬性不止這些，還有更多的設置的屬性
DrawerNavigatorConfig
drawerWidth - 抽屜的寬度
drawerPosition - 選項是左或右。 默認為左側位置
contentComponent - 用于呈現抽屜內容的組件，例如導航項。 接收抽屜的導航。 默認為DrawerItems
contentOptions - 配置抽屜內容
initialRouteName - 初始路由的routeName
order - 定義抽屜項目順序的routeNames數組。
路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設置的路徑。
backBehavior - 后退按鈕是否會切換到初始路由？ 如果是，設置為initialRoute，否則為none。 默認為initialRoute行為
DrawerItems的contentOptions屬性
activeTintColor - 活動標簽的標簽和圖標顏色
activeBackgroundColor - 活動標簽的背景顏色
inactiveTintColor - 非活動標簽的標簽和圖標顏色
inactiveBackgroundColor - 非活動標簽的背景顏色
內容部分的樣式樣式對象
labelStyle - 當您的標簽是字符串時，要覆蓋內容部分中的文本樣式的樣式對象
貼出源碼?？梢愿玫膮⒖?。
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>
);
}
}
打開抽屜的方法
//打開的方法
open(){
this.props.navigation.navigate('DrawerOpen');
}
關閉抽屜的方法
//關閉的方法
close(){
this.props.navigation.navigate('DrawerClose');
}
在實際的應用中，我們就可以通過圖片等方式來實現打開或者關閉抽屜導航。
總結
項目中一開始使用的是navigator。習慣傳值push，回調的pop。老實說一開始相對比較地址react-navigation,但是在自己嘗試做了幾個這樣demo之后，我也有了重構自己代碼的想法。希望通過react-navigation來實現切換的更加流暢。
其實react-navigation看似復雜，但是實現簡單的一些東西，他反而更加簡單，
StackNavigator
我們實現頁面的跳轉的時候，navigate ‘xxx‘跳轉的頁面，后面{}，是傳遞的參數，參數值，或者回調函數。
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,
},
});
趕緊的，配合一些必要的屬性，去實現react-navigation的功能吧。
