michaelrio

bottom navigator

Jan 14th, 2020
83
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { Text, View } from 'react-native';
  3. import { createAppContainer } from 'react-navigation';
  4. import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
  5.  
  6. class Album extends React.Component {
  7. render() {
  8. return (
  9. <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  10. <Text>Album!</Text>
  11. </View>
  12. );
  13. }
  14. }
  15.  
  16. class Library extends React.Component {
  17. render() {
  18. return (
  19. <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  20. <Text>Libary!</Text>
  21. </View>
  22. );
  23. }
  24. }
  25.  
  26. class Profile extends React.Component {
  27. render() {
  28. return (
  29. <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  30. <Text>Profile!</Text>
  31. </View>
  32. );
  33. }
  34. }
  35.  
  36. class Detail extends React.Component {
  37. render() {
  38. return (
  39. <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  40. <Text>Detail!</Text>
  41. </View>
  42. );
  43. }
  44. }
  45.  
  46. const TabNavigator = createMaterialBottomTabNavigator({
  47. Album: { screen: Album },
  48. Library: { screen: Library },
  49. Profile: { screen: Profile },
  50. Detail: { screen: Detail },
  51. },
  52. {
  53. initialRouteName: 'Album',
  54. activeColor: '#f0edf6',
  55. inactiveColor: 'blue',
  56. barStyle: { backgroundColor: 'red'
  57. },}
  58. );
  59.  
  60. export default createAppContainer(TabNavigator);
RAW Paste Data