react-native-navigation的迁移库

app.js 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import {createStore, applyMiddleware, combineReducers} from "redux";
  2. import {Provider} from "react-redux";
  3. import {Navigation} from "react-native-navigation";
  4. import thunk from "redux-thunk";
  5. import * as reducers from "./reducers";
  6. import * as appActions from "./reducers/app/actions";
  7. import {registerScreens} from "./screens";
  8. import {Platform} from "react-native";
  9. // redux related book keeping
  10. const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
  11. const reducer = combineReducers(reducers);
  12. const store = createStoreWithMiddleware(reducer);
  13. // screen related book keeping
  14. registerScreens(store, Provider);
  15. // notice that this is just a simple class, it's not a React component
  16. export default class App {
  17. constructor() {
  18. // since react-redux only works on components, we need to subscribe this class manually
  19. store.subscribe(this.onStoreUpdate.bind(this));
  20. store.dispatch(appActions.appInitialized());
  21. }
  22. onStoreUpdate() {
  23. const {root} = store.getState().app;
  24. // handle a root change
  25. // if your app doesn't change roots in runtime, you can remove onStoreUpdate() altogether
  26. if (this.currentRoot != root) {
  27. this.currentRoot = root;
  28. this.startApp(root);
  29. }
  30. }
  31. startApp(root) {
  32. switch (root) {
  33. case 'login':
  34. if (Platform.OS === 'ios') {
  35. Navigation.startSingleScreenApp({
  36. screen: {
  37. screen: 'example.LoginScreen',
  38. title: 'Login',
  39. navigatorStyle: {}
  40. },
  41. passProps: {
  42. str: 'This is a prop passed in \'startSingleScreenApp()\'!',
  43. obj: {
  44. str: 'This is a prop passed in an object!',
  45. arr: [
  46. {
  47. str: 'This is a prop in an object in an array in an object!'
  48. }
  49. ],
  50. arr2: [
  51. [
  52. 'array of strings',
  53. 'with two strings'
  54. ],
  55. [
  56. 1, 2, 3
  57. ]
  58. ]
  59. },
  60. num: 1234,
  61. fn: function() {
  62. return 'Hello from a function!';
  63. }
  64. }
  65. });
  66. } else {
  67. Navigation.startSingleScreenApp({
  68. screen: {
  69. screen: 'example.LoginScreen',
  70. title: 'Login',
  71. navigatorStyle: {}
  72. },
  73. passProps: {
  74. str: 'This is a prop passed in \'startSingleScreenApp()\'!',
  75. obj: {
  76. str: 'This is a prop passed in an object!',
  77. arr: [
  78. {
  79. str: 'This is a prop in an object in an array in an object!'
  80. }
  81. ],
  82. arr2: [
  83. [
  84. 'array of strings',
  85. 'with two strings'
  86. ],
  87. [
  88. 1, 2, 3
  89. ]
  90. ]
  91. },
  92. num: 1234,
  93. fn: function() {
  94. return 'Hello from a function!';
  95. }
  96. }
  97. });
  98. // Navigation.startSingleScreenApp({
  99. // screen: {
  100. // title: 'Example',
  101. // screen: 'example.TopTabsScreen',
  102. // topTabs: [
  103. // {
  104. // screenId: 'example.FirstTabScreen',
  105. // title: 'Tab1',
  106. // passProps: {
  107. // str: 'This is a prop passed to Tab1',
  108. // fn: () => 'Hello from a function passed as passProps!'
  109. // }
  110. // },
  111. // {
  112. // screenId: 'example.PushedScreen',
  113. // title: 'Tab2',
  114. // passProps: {
  115. // str: 'This is a prop passed to Tab2'
  116. // }
  117. // },
  118. // {
  119. // screenId: 'example.ListScreen',
  120. // title: 'Tab3',
  121. // passProps: {
  122. // str: 'This is a prop passed to Tab3'
  123. // }
  124. // }
  125. // ],
  126. // navigatorStyle: {}
  127. // },
  128. // drawer: { // optional, add this if you want a side menu drawer in your app
  129. // left: { // optional, define if you want a drawer from the left
  130. // screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
  131. // },
  132. // disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
  133. // }
  134. // });
  135. }
  136. return;
  137. case 'after-login':
  138. Navigation.startTabBasedApp({
  139. tabs: [
  140. {
  141. label: 'One',
  142. screen: 'example.FirstTabScreen',
  143. icon: require('../img/one.png'),
  144. selectedIcon: require('../img/one_selected.png'),
  145. title: 'Screen One',
  146. overrideBackPress: true,
  147. navigatorStyle: {}
  148. },
  149. {
  150. label: 'Two',
  151. screen: 'example.SecondTabScreen',
  152. icon: require('../img/two.png'),
  153. selectedIcon: require('../img/two_selected.png'),
  154. title: 'Screen Two',
  155. navigatorStyle: {}
  156. }
  157. ],
  158. passProps: {
  159. str: 'This is a prop passed in \'startTabBasedApp\'!',
  160. obj: {
  161. str: 'This is a prop passed in an object!',
  162. arr: [
  163. {
  164. str: 'This is a prop in an object in an array in an object!'
  165. }
  166. ]
  167. },
  168. num: 1234
  169. },
  170. animationType: 'slide-down',
  171. title: 'Redux Example',
  172. drawer: { // optional, add this if you want a side menu drawer in your app
  173. left: { // optional, define if you want a drawer from the left
  174. screen: 'example.BottomTabsSideMenu' // unique ID registered with Navigation.registerScreen
  175. },
  176. disableOpenGesture: false, // optional, can the drawer be opened with a swipe instead of button
  177. passProps: {
  178. title: 'Hello from SideMenu'
  179. }
  180. },
  181. appStyle: {
  182. bottomTabBadgeTextColor: '#ffffff',
  183. bottomTabBadgeBackgroundColor: '#ff0000'
  184. }
  185. });
  186. return;
  187. default:
  188. console.error('Unknown app root');
  189. }
  190. }
  191. }