首頁 > web前端 > js教程 > 導覽組件react-navigation如何使用

導覽組件react-navigation如何使用

php中世界最好的语言
發布: 2017-12-30 17:59:00
原創
1877 人瀏覽過

這次帶給大家的是導航元件react-navigation如何使用,大家應該都有所體會,我們在一般應用都有跨tab跳轉的需求, 這就需要特別處理下路由,這篇文章就給大家好好分析一下。

特定情境是: app分三大模組Home首頁, Bill帳單和Me我的, 對應三個tab. 現在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到Bill賬單首頁.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

const Components = {

 HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },

 HomeThree: { screen: HomeThree, path:'app/HomeThree' },

 BillTwo: { screen: BillTwo, path:'app/BillTwo' },

 BillThree: { screen: BillThree, path:'app/BillThree' },

}

   

const Tabs = TabNavigator({

 Home: {

  screen: Home,

  path:'app/home',

  navigationOptions: {

  tabBar: {

   label: '首页',

   icon: ({tintColor}) => (<Image source={require(&#39;./images/home.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),

  },

  }

 },

 Bill: {

  screen: Bill,

  path:&#39;app/bill&#39;,

  navigationOptions: {

  tabBar: {

   label: &#39;账单&#39;,

   icon: ({tintColor}) => (<Image source={require(&#39;./images/bill.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),

  },

  }

 },

 Me: {

  screen: Me,

  path:&#39;app/me&#39;,

  navigationOptions: {

  tabBar: {

   label: &#39;我&#39;,

   icon: ({tintColor}) => (<Image source={require(&#39;./images/me.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),

  },

  }

 }

 }, {

 tabBarPosition: &#39;bottom&#39;,

 swipeEnabled: false,

 animationEnabled: false,

 lazyLoad: false,

 backBehavior: &#39;none&#39;,

 tabBarOptions: {

  activeTintColor: &#39;#ff8500&#39;,

  inactiveTintColor: &#39;#999&#39;,

  showIcon: true,

  indicatorStyle: {

  height: 0

  },

  style: {

  backgroundColor: &#39;#fff&#39;,

  },

  labelStyle: {

  fontSize: 10,

  },

 },

 });

   

   

 const Navs = StackNavigator({

 Home: { screen: Tabs, path:&#39;app/Home&#39; },

 Bill: { screen: Tabs, path:&#39;app/Bill&#39; },

 Me: { screen: Tabs, path:&#39;app/Me&#39; },

 ...Components

 }, {

 initialRouteName: &#39;Home&#39;,

 navigationOptions: {

  header: {

  style: {

   backgroundColor: &#39;#fff&#39;

  },

  titleStyle: {

   color: &#39;green&#39;

  }

  },

  cardStack: {

  gesturesEnabled: true

  }

 },

 mode: &#39;card&#39;,

 headerMode: &#39;screen&#39;

 });

登入後複製

在HomeTwo裡使用react-navigation自帶的reset action就可以重置路由信息了:

1

2

3

4

5

6

7

8

9

10

11

// push BillTwo

this.props.navigation.dispatch(resetAction);

   

// 使用reset action重置路由

const resetAction = NavigationActions.reset({

 index: 1, // 注意不要越界

 actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo

 NavigationActions.navigate({ routeName: &#39;Bill&#39;}),

 NavigationActions.navigate({ routeName: &#39;BillTwo&#39;})

 ]

});

登入後複製

從HomeTwo push到BillTwo頁面後, 點擊BillTwo的左上角導航按鈕返回就能返回到Bill賬單首頁了.


相信看了以上介紹你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

駝峰命名與JS的問題解答

JS裡的布林值、關係運算子、邏輯運算子的詳解及實例

js程式碼案例-根據日期計算星期幾

以上是導覽組件react-navigation如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板