SimpleStack.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. /**
  2. * @flow
  3. */
  4. import type {
  5. NavigationScreenProp,
  6. NavigationState,
  7. NavigationStateRoute,
  8. NavigationEventSubscription,
  9. } from 'react-navigation';
  10. import * as React from 'react';
  11. import { Platform, ScrollView, StatusBar } from 'react-native';
  12. import {
  13. createStackNavigator,
  14. SafeAreaView,
  15. withNavigation,
  16. NavigationActions,
  17. StackActions,
  18. } from 'react-navigation';
  19. import invariant from 'invariant';
  20. import SampleText from './SampleText';
  21. import { Button } from './commonComponents/ButtonWithMargin';
  22. import { HeaderButtons } from './commonComponents/HeaderButtons';
  23. const DEBUG = false;
  24. type MyNavScreenProps = {
  25. navigation: NavigationScreenProp<NavigationState>,
  26. banner: React.Node,
  27. };
  28. type BackButtonProps = {
  29. navigation: NavigationScreenProp<NavigationStateRoute>,
  30. };
  31. class MyBackButton extends React.Component<BackButtonProps, any> {
  32. render() {
  33. return (
  34. <HeaderButtons>
  35. <HeaderButtons.Item title="Back" onPress={this._navigateBack} />
  36. </HeaderButtons>
  37. );
  38. }
  39. _navigateBack = () => {
  40. this.props.navigation.goBack(null);
  41. };
  42. }
  43. const MyBackButtonWithNavigation = withNavigation(MyBackButton);
  44. class MyNavScreen extends React.Component<MyNavScreenProps> {
  45. render() {
  46. const { navigation, banner } = this.props;
  47. const { push, replace, popToTop, pop, dismiss } = navigation;
  48. invariant(
  49. push && replace && popToTop && pop && dismiss,
  50. 'missing action creators for StackNavigator'
  51. );
  52. return (
  53. <SafeAreaView>
  54. <SampleText>{banner}</SampleText>
  55. <Button
  56. onPress={() => push('Profile', { name: 'Jane' })}
  57. title="Push a profile screen"
  58. />
  59. <Button
  60. onPress={() =>
  61. navigation.dispatch(
  62. StackActions.reset({
  63. index: 0,
  64. actions: [
  65. NavigationActions.navigate({
  66. routeName: 'Photos',
  67. params: { name: 'Jane' },
  68. }),
  69. ],
  70. })
  71. )
  72. }
  73. title="Reset photos"
  74. />
  75. <Button
  76. onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
  77. title="Navigate to a photos screen"
  78. />
  79. <Button
  80. onPress={() => replace('Profile', { name: 'Lucy' })}
  81. title="Replace with profile"
  82. />
  83. <Button onPress={() => popToTop()} title="Pop to top" />
  84. <Button onPress={() => pop()} title="Pop" />
  85. <Button
  86. onPress={() => {
  87. if (navigation.goBack()) {
  88. console.log('goBack handled');
  89. } else {
  90. console.log('goBack unhandled');
  91. }
  92. }}
  93. title="Go back"
  94. />
  95. <Button onPress={() => dismiss()} title="Dismiss" />
  96. <StatusBar barStyle="default" />
  97. </SafeAreaView>
  98. );
  99. }
  100. }
  101. type MyHomeScreenProps = {
  102. navigation: NavigationScreenProp<NavigationState>,
  103. };
  104. class MyHomeScreen extends React.Component<MyHomeScreenProps> {
  105. static navigationOptions = {
  106. title: 'Welcome',
  107. };
  108. _s0: NavigationEventSubscription;
  109. _s1: NavigationEventSubscription;
  110. _s2: NavigationEventSubscription;
  111. _s3: NavigationEventSubscription;
  112. componentDidMount() {
  113. this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
  114. this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
  115. this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
  116. this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
  117. }
  118. componentWillUnmount() {
  119. this._s0.remove();
  120. this._s1.remove();
  121. this._s2.remove();
  122. this._s3.remove();
  123. }
  124. _onWF = a => {
  125. DEBUG && console.log('_willFocus HomeScreen', a);
  126. };
  127. _onDF = a => {
  128. DEBUG && console.log('_didFocus HomeScreen', a);
  129. };
  130. _onWB = a => {
  131. DEBUG && console.log('_willBlur HomeScreen', a);
  132. };
  133. _onDB = a => {
  134. DEBUG && console.log('_didBlur HomeScreen', a);
  135. };
  136. render() {
  137. const { navigation } = this.props;
  138. return <MyNavScreen banner="Home Screen" navigation={navigation} />;
  139. }
  140. }
  141. type MyPhotosScreenProps = {
  142. navigation: NavigationScreenProp<NavigationState>,
  143. };
  144. class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
  145. static navigationOptions = {
  146. title: 'Photos',
  147. headerLeft: <MyBackButtonWithNavigation />,
  148. };
  149. _s0: NavigationEventSubscription;
  150. _s1: NavigationEventSubscription;
  151. _s2: NavigationEventSubscription;
  152. _s3: NavigationEventSubscription;
  153. componentDidMount() {
  154. this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
  155. this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
  156. this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
  157. this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
  158. }
  159. componentWillUnmount() {
  160. this._s0.remove();
  161. this._s1.remove();
  162. this._s2.remove();
  163. this._s3.remove();
  164. }
  165. _onWF = a => {
  166. DEBUG && console.log('_willFocus PhotosScreen', a);
  167. };
  168. _onDF = a => {
  169. DEBUG && console.log('_didFocus PhotosScreen', a);
  170. };
  171. _onWB = a => {
  172. DEBUG && console.log('_willBlur PhotosScreen', a);
  173. };
  174. _onDB = a => {
  175. DEBUG && console.log('_didBlur PhotosScreen', a);
  176. };
  177. render() {
  178. const { navigation } = this.props;
  179. return (
  180. <MyNavScreen
  181. banner={`${navigation.getParam('name')}'s Photos`}
  182. navigation={navigation}
  183. />
  184. );
  185. }
  186. }
  187. const MyProfileScreen = ({ navigation }) => (
  188. <MyNavScreen
  189. banner={`${
  190. navigation.getParam('mode') === 'edit' ? 'Now Editing ' : ''
  191. }${navigation.getParam('name')}'s Profile`}
  192. navigation={navigation}
  193. />
  194. );
  195. MyProfileScreen.navigationOptions = props => {
  196. const { navigation } = props;
  197. const { state, setParams } = navigation;
  198. const { params } = state;
  199. return {
  200. headerBackImage: params.headerBackImage,
  201. headerTitle: `${params.name}'s Profile!`,
  202. // Render a button on the right side of the header.
  203. // When pressed switches the screen to edit mode.
  204. headerRight: (
  205. <HeaderButtons>
  206. <HeaderButtons.Item
  207. title={params.mode === 'edit' ? 'Done' : 'Edit'}
  208. onPress={() =>
  209. setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
  210. }
  211. />
  212. </HeaderButtons>
  213. ),
  214. };
  215. };
  216. const SimpleStack = createStackNavigator(
  217. {
  218. Home: {
  219. screen: MyHomeScreen,
  220. },
  221. Profile: {
  222. path: 'people/:name',
  223. screen: MyProfileScreen,
  224. },
  225. Photos: {
  226. path: 'photos/:name',
  227. screen: MyPhotosScreen,
  228. },
  229. },
  230. {
  231. // headerLayoutPreset: 'center',
  232. }
  233. );
  234. export default SimpleStack;