react-native之react-navigation使用總結
阿新 • • 發佈：2019-02-06
前言
介面Tab導航，跳轉以及title的顯示效果是一款優秀APP非常重要的一部分，門面要做好，才會帶來好的使用者體驗。
目錄
- 安裝
- 使用介紹
安裝
npm安裝
npm install --save react-navigationyarn安裝
yarn add react-navigation使用介紹
1.navigation有三個預設的navigators：
- StackNavigator: 用來實現介面間的切換， 新的介面置於棧頂。
- TabNavigator：實現Tab選單功能。
- DrawerNavigator： 實現抽屜選單的效果。
2.具體使用
StackNavigator使用：
1.建立StackNavigator
import Tab from './MainTab';
/**
* 應用根路由
*/
export const RootNavigator = StackNavigator({
Tab: {screen: Tab},
}, {
initialRouteName: 'Tab',
mode: 'card',
headerMode: 'screen',
navigationOptions: () => ({
headerBackTitle: null 2.API 定義
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs配置：
Tab: {screen: Tab},第一個Tab是定義的路由名字，第二個是引入的元件。使用this.props.navigation.navigate('路由名')，就可以實現跳轉;
StackNavigatorConfig配置：
路由相關配置：
- initialRouteName：預設的初始要跳轉的介面，必須匹配一個已經配置的路由，否則報錯。
- initialRouteParams： 初始化路由引數。
- navigationOptions： 預設的navifation選項，下面有詳細總結。
- paths：路由路徑的配置設定。
視覺化選項：
- mode: 定義顯示和介面切換風格
a. card - Android 和 iOS 標準模式。預設此模式。
b. modal - IOS介面從底部滑動顯示，Android不支援此屬性 - headerMode：定義header如何渲染
a. float: header漂浮在介面之上，介面切換有個透明度的改變，不會固定在介面上跟著介面走。這個是iOS上常見的模式。
b.screen：header吸附在介面上，隨著介面的移動而移動，這個是Android上面常用模式。
c.none：不渲染頭。 - cardStyle：對單個的card的風格進行定義。
- transitionConfig： 介面切換配置。
a.transitionProps： 新介面切換屬性配置。
b.prevTransitionProps: 關閉介面屬性配置。
c.isModal: 布林值，是否指定以modal的形式切換介面。 - onTransitionStart: 開始切換時的回撥。
- onTransitionEnd： 結束切換時回撥。
Navigation Options配置：
- title： 介面標題。
- header： 介面的頭佈局，設定為null則隱藏header。
- headerTitle： 介面title, 當他是一個元件時，可以接收allowFontScaling, style 和 children屬性。
- headerTitleAllowFontScaling： 布林值，是否允許頭字型支援縮放，預設為true。
- headerBackTitle： 返回title.iOS 11使用。
- headerTruncatedBackTitle：返回，headerBackTitle不適用時使用。
- headerRight： 顯示在header右側。
- headerLeft： 顯示在header左側。
- headerStyle： header的style物件。
- headerTitleStyle： title元件物件。
- headerBackTitleStyle：backtitle的style物件。
- headerTintColor： header的顏色。
- headerPressColorAndroid： Android >= 5.0 材質化設計點選漣漪效果。
- gesturesEnabled: 布林值，是否支援手勢關閉螢幕，iOS 預設為true，Android預設為false。
- gestureResponseDistance： 手勢響應的距離。
a.horizontal - 水平的距離，預設25。
b.vertical - 垂直的距離， 預設135。 - gestureDirection：重新定義手勢方向，預設正常的方向。
- Navigator Props： Navigator屬性。
render() {
return (
<RootNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav
})} />
)
}RootNavigator是StackNavigater元件，navigation是其屬性，這樣我們就可以在子元件中通過this.props.navigation取到navigation屬性。
TabNavigator使用：
1.建立TabNavigator
/**
* 首頁導航
* @type {Object}
*/
export default TabNavigator({
Home: {screen: Home},
StationPage: {screen: StationPage},
MessagePage: {screen: MessagePage},
AccountPage: {screen: AccountPage},
}, {
initialRouteName: 'StationPage',
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: false,
navigationOptions: {
gesturesEnabled: false,
headerBackTitle: null,
},
tabBarOptions: {
showIcon: true,
activeTintColor: theme.TAB_TINT_COLOR_ACTIVE,
inactiveTintColor: theme.TAB_TINT_COLOR,
indicatorStyle: {height: 0},
style: {
backgroundColor: '#efefef',
height: px(100),
paddingTop: 0,
},
labelStyle: {
fontSize: px(24),
marginTop: 0,
paddingTop: 0,
},
}
});2.API 定義
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs配置：
它是一個從路由名字到路由配置的對映。使用類似StackNavigator。
TabNavigatorConfig配置：
- tabBarComponent： Tab bar元件，iOS 預設在下面，Android 預設在上面。
- tabBarPosition： Tab bar 的位置，“top” 或者 “bottom”。
- swipeEnabled：是否允許tab之間進行切換。
- animationEnabled： 是否允許切換時執行動畫。
- configureTransition： 配置tab之間切換動畫。
- lazy： 控制懶載入機制，是否需要提前載入。
- initialLayout： 初始的佈局，包含寬高，可已預防載入遲鈍。
- tabBarOptions： tabBar的一些樣式選項。下面有總結。
- initialRouteName： 第一個載入的路由名。
- order： 對載入路由進行排序。
- paths：名字到路由配置的對映，對路由配置進行設定。
- backBehavior: 點選返回鍵，是否切換到initialRoute。
tabBarOptions配置：
- activeTintColor： 選中tab的圖示和標籤的顏色。
- activeBackgroundColor: 選中Tab的背景顏色。(IOS)
- inactiveTintColor： 未被選中Tab的圖示和標籤的顏色。
- inactiveBackgroundColor： 未被選中的Tab的背景顏色。(IOS)
- showLabel：是否顯示對應Tab的標籤，預設顯示。
- style： Tab bar的樣式。
- labelStyle：Tab標籤的樣式。
- tabStyle: Tab的樣式。
- allowFontScaling： 標籤字型是否允許縮放。預設true。
- showIcon：是否顯示圖片。預設不顯示。（Android）
- upperCaseLabel: 是否標籤大寫。預設true。(Android)
- pressColor: 點選顏色。（Android >= 5.0 漣漪效果）
- pressOpacity：透明度改變。（iOS and Android < 5.0 only）
- scrollEnabled: 是否Tab能夠滑動。（Android）
- indicatorStyle： Tab 底端指示器風格。（Android）
- iconStyle: Tab Icon物件樣式。（Android）
Navigation Options 配置：
- title： 標題。
- tabBarVisible： 布林值，tabBar是否可見。
- swipeEnabled： 布林值，是否允許在標籤之間進行滑動。
- tabBarIcon： tabBar圖片icon。
- tabBarLabel：同tabBarOptions.showLabel。
- tabBarOnPress： 點選tabBar觸發。
a.previousScene: { route, index } : 離開時的介面。
b.scene: { route, index } ： 點選的路由，索引。
c.jumpToIndex： 在切換到下一個介面之前，可以在此方法中處理一些自定義的邏輯。
Navigator Props配置： 同上。
DrawerNavigator使用：
1.建立DrawerNavigator(官方的例子):
class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});2.API定義：
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
RouteConfigs配置：
同StackNavigator配置。
DrawerNavigatorConfig配置
- drawerWidth： 抽屜的寬度或者是函式返回值。
- drawerPosition： 抽屜的位置，left左側，right右側。
- contentComponent： 用來渲染抽屜內容的元件。下面詳解。
- contentOptions: 配置抽屜的內容。下面詳解。
- useNativeAnimations： 使用本地動畫。預設true。
- drawerBackgroundColor：抽屜的背景顏色。預設白色。
- initialRouteName： 初始化路由名。
- order。抽屜item顯示的順序。
- paths：路由名字到配置的對映。
- backBehavior： 返回按鈕是否返回初始路由。yes到初始路由，否則none。
自定義contentcomponent:
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
contentOptions配置：
- items： 可以修改或者重寫路由。
- activeItemKey： 啟用路由對應的key。
- activeTintColor： 選中標籤對應的標籤和icon的顏色。
- activeBackgroundColor： 選中標籤對應的顏色。
- inactiveTintColor：未選中對應的標籤和icon對應的顏色。
- inactiveBackgroundColor：未選中對應的北京顏色。
- onItemPress(route)： 當item被點選時，呼叫的函式。
- itemsContainerStyle：對應section部分的樣式。
- itemStyle： 對應item的樣式。
- labelStyle： 對應label的樣式。
- iconContainerStyle：重寫view的icon Container樣式。
Navigation Options配置：
- title： 標題。
- drawerLabel： 字串，元件或者函式。標籤顯示在側邊欄，沒有定義title代替。
- drawerIcon：元件或者函式。圖片顯示在側邊欄。
drawerLockMode： 指定抽屜的鎖模式。
a. unlocked: 預設。響應手勢的觸控開關。
b. locked-closed：抽屜保持關閉的狀態，不響應手勢。
c. locked-open： 抽屜一直開著，不響應手勢。Navigator Props配置：
同StackNavigator。