一篇邊學邊總結react-navigation的文章
阿新 • • 發佈：2019-02-07
*該文章用於以後自己檢視，所以文章邏輯不是很統一。
StackNavigator的基本流程
註冊頁面:
這裡第一個註冊的是頂層元件，會預設一開始顯示。
import { StackNavigator } from 'react-navigation'; import Home from './src/container/Home/Home'; import Detail from './src/container/Detail/Detail'; import List from './List'; export default StackNavigator({ Home: { //key為這個元件的標識 screen: Home }, Detail: { screen: Detail //引入的元件寫在這裡 }, List: { screen: List, navigationOptions: { //每個頁面的一些配置，可以寫在這裡，也可以寫在具體的元件裡面 title: '列表標題' } } });
每個元件的配置寫在具體的元件裡面：
export default class List extends Component{ static navigationOptions = { title: 'List', //header: null 這個引數可以隱藏頭部 };
}
跳轉到某個頁面：
render() { const { navigate, state } = this.props.navigation; return ( <View style={styles.container}><Text style={styles.welcome}> Welcome to React Home! </Text> <Button onPress= {() => { navigate('Detail', {user_name: "YINYI"}) //跳轉到Detail元件 並傳了一個user_name的引數給Detail元件 }}title="跳轉到Detail" color= "#f40" /> </View> ); }
在Detai也裡面使用接收的引數：
render() { const {navigator, state,} = this.props.navigation; return ( <View style={styles.container}> <Button onPress= {() => { navigator('List') }}title="跳轉到List" color= "#f40" /> <Text>{state.params.user_name}</Text> //這裡使用Home傳過來的引數 </View> ); }
TabNavigator 流程
註冊Tab各個元件
import { TabNavigator } from 'react-navigation'; import Detail from '../Detail/Detail'; import List from '../../../List'; export default Home = TabNavigator({ Detail: { screen: Detail, navigationOptions: { title: '詳情', tabBarLabel: '詳情', tabBarIcon: () => { return(<Image source={ require('../../static/minus.png') }style={styles.icon}// {tintColor: tintColor} 選中的圖片和文字顏色/>) } } }, List: { screen: List, navigationOptions: { title: '我的', tabBarLabel: '我的', tabBarIcon: ({ tintColor }) => ( <Image source={ require('../../static/add.png') }style={styles.icon}// {tintColor: tintColor} 選中的圖片和文字顏色/> ) } }, }, { tabBarPosition: 'bottom', // 顯示在底端，android 預設是顯示在頁面頂端的 swipeEnabled: true, // 是否左右滑動,如果有DrawerNavigator,最好設定為false避免手勢衝突 tabBarOptions: { //這裡設定一些tabBar的屬性 activeTintColor: '#f40', // 文字和圖片選中顏色 inactiveTintColor: '#999', // 文字和圖片預設顏色 showIcon: true, // android 預設不顯示 icon, 需要設定為 true 才會顯示 indicatorStyle: {height: 0}, // android 中TabBar下面會顯示一條線，高度設為 0 後就不顯示線了， 不知道還有沒有其它方法隱藏？？？ style: { backgroundColor: '#fff', // TabBar 背景色 height:50 }, labelStyle: { fontSize: 12, // 文字大小, marginTop: 0, }, }, });
將這個容器新增到router
import { StackNavigator } from 'react-navigation'; import Home from './src/container/Home/Home'; import Content from './src/container/Content/Content'; export default StackNavigator({ Home: { screen: Home, navigationOptions: { title: "HomePage" } }, Content: { screen: Content, navigationOptions: { headerTitle: 'ContentPage' } } });
TabNavigator裡面的每個元件可以跳轉StackNavigator裡的頁面，這樣可以巢狀很多可能，但是要跳轉的頁面必須在StackNavigator裡面註冊，比如這裡在Detail裡面跳轉到Content:
export default class Detail extends Component{ render() { return ( <View style={styles.container}> <Text>Detail Page</Text> <Button title= "跳轉到Content" color= "#f40" onPress= {() => { this.props.navigation.navigate('Content', {content: 'Content的詳細內容...'}) }} /> </View> ); } }
DrawerNavigator流程：
註冊一個DrawerNavigator,裡面包含了兩個介面:
const CustomDrawerContentComponent = (props) => ( <ScrollView> {/*<DrawerItems {...props} />*/} <View> <Text>46645646546</Text> </View> </ScrollView> ); const MyDraw = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: Order, }, }, { //drawerWidth: 200, // 抽屜寬 drawerPosition: 'left', // 抽屜在左邊還是右邊 contentComponent: CustomDrawerContentComponent, // 自定義抽屜元件 // contentOptions: { // initialRouteName: MyHomeScreen, // 預設頁面元件 // activeTintColor: 'white', // 選中文字顏色 // activeBackgroundColor: '#ff8500', // 選中背景顏色 // inactiveTintColor: '#666', // 未選中文字顏色 // inactiveBackgroundColor: '#fff', // 未選中背景顏色 // style: { // 樣式 // // } // } }); module.exports = MyDraw;
*在Drawer裡註冊的頁面只能跳轉到Drawer裡面註冊的其他頁面。
在另一個頁面裡展現DrawerNavigator:
export default class Content extends Component{ render() { return ( <Drawer /> ); } }
將這個頁面放在之前的StackNavigator裡就可以通過訪問這個頁面（這裡的content）去訪問Drawer裡包含的頁面了：
export default StackNavigator({ Home: { screen: Home, navigationOptions: { title: "HomePage" } }, Content: { screen: Content, navigationOptions: { header: null } }, Detail: { screen: Detail } });
路由跳轉並清空路由記錄：
import { NavigationActions } from 'react-navigation'
resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName:'xxx'})//要跳轉到的頁面名字
]
});
this.props.navigation.dispatch(resetAction);最後附上一些引數說明（這一部分屬於轉載內容）：
1、StackNavigator屬性介紹
- navigationOptions：配置StackNavigator的一些屬性。
- title：標題，如果設定了這個導航欄和標籤欄的title就會變成一樣的，不推薦使用
- header：可以設定一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設定為null
- headerTitle：設定導航欄標題，推薦
- headerBackTitle：設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題。可以自定義，也可以設定為null
- headerTruncatedBackTitle：設定當上個頁面標題不符合返回箭頭後的文字時，預設改成"返回"
- headerRight：設定導航條右側。可以是按鈕或者其他檢視控制元件
- headerLeft：設定導航條左側。可以是按鈕或者其他檢視控制元件
- headerStyle：設定導航條的樣式。背景色，寬高等
- headerTitleStyle：設定導航欄文字樣式
- headerBackTitleStyle：設定導航欄‘返回’文字樣式
- headerTintColor：設定導航欄顏色
- headerPressColorAndroid：安卓獨有的設定顏色紋理，需要安卓版本大於5.0
- gesturesEnabled：是否支援滑動返回手勢，iOS預設支援，安卓預設關閉
- screen：對應介面名稱，需要填入import之後的頁面
- mode：定義跳轉風格
- card：使用iOS和安卓預設的風格
- modal：iOS獨有的使螢幕從底部畫出。類似iOS的present效果
- headerMode：返回上級頁面時動畫效果
- float：iOS預設的效果
- screen：滑動過程中，整個頁面都會返回
- none：無動畫
- cardStyle：自定義設定跳轉效果
- transitionConfig： 自定義設定滑動返回的配置
- onTransitionStart：當轉換動畫即將開始時被呼叫的功能
- onTransitionEnd：當轉換動畫完成，將被呼叫的功能
- path：路由中設定的路徑的覆蓋對映配置
- initialRouteName：設定預設的頁面元件，必須是上面已註冊的頁面元件
- initialRouteParams：初始路由引數
注：大家可能對於path不太理解。path屬性適用於其他app或瀏覽器使用url開啟本app並進入指定頁面。path屬性用於宣告一個介面路徑，例如：【/pages/Home】。此時我們可以在手機瀏覽器中輸入：app名稱://pages/Home來啟動該App，並進入Home介面。
2、TabNavigator屬性介紹
- 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：圖示樣式
3、DrawerNavigator屬性介紹
- DrawerNavigatorConfig
- drawerWidth - 抽屜的寬度
- drawerPosition - 選項是左或右。 預設為左側位置
- contentComponent - 用於呈現抽屜內容的元件，例如導航項。 接收抽屜的導航。 預設為DrawerItems
- contentOptions - 配置抽屜內容
- initialRouteName - 初始路由的routeName
- order - 定義抽屜專案順序的routeNames陣列。
- 路徑 - 提供routeName到路徑配置的對映，它覆蓋routeConfigs中設定的路徑。
- backBehavior - 後退按鈕是否會切換到初始路由？ 如果是，設定為initialRoute，否則為none。 預設為initialRoute行為
- DrawerItems的contentOptions屬性
- activeTintColor - 活動標籤的標籤和圖示顏色
- activeBackgroundColor - 活動標籤的背景顏色
- inactiveTintColor - 非活動標籤的標籤和圖示顏色
- inactiveBackgroundColor - 非活動標籤的背景顏色
- 內容部分的樣式樣式物件
- labelStyle - 當您的標籤是字串時，要覆蓋內容部分中的文字樣式的樣式物件