暫無描述

LearnViewControllerNavigationBar.js 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. /**
  2. * Created by zack on 2018/4/29.
  3. */
  4. import {
  5. View,
  6. Text,
  7. StyleSheet,
  8. FlatList,
  9. Platform,
  10. TouchableOpacity,
  11. Image
  12. } from 'react-native'
  13. import React, {Component} from 'react'
  14. import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
  15. export default class LearnViewControllerNavigationBar extends Component {
  16. constructor(props) {
  17. super(props)
  18. this.state = {
  19. title: props.title,
  20. subTitle: props.subTitle,
  21. leftTitle: props.leftTitle
  22. }
  23. }
  24. componentWillReceiveProps(props) {
  25. this.setState({
  26. title: props.title,
  27. subTitle: props.subTitle,
  28. leftTitle: props.leftTitle
  29. })
  30. }
  31. shouldComponentUpdate(nextProps) {
  32. if (nextProps.title !== this.state.title || nextProps.subTitle !== this.state.subTitle ||
  33. nextProps.leftTitle !== this.state.leftTitle
  34. ) {
  35. return true
  36. }
  37. return false
  38. }
  39. render() {
  40. return (
  41. <View style={styles.View}>
  42. <View style={styles.NavigationBarView}>
  43. <TouchableOpacity onPress={() => {
  44. this.props.didClickLeftButton()
  45. }} style={styles.LeftView}>
  46. <Image source={require("../../resources/images/TabBar/Learn/btn_back.png")}/>
  47. <Text style={styles.LeftText}>{this.state.leftTitle}</Text>
  48. </TouchableOpacity>
  49. <View style={styles.TitleView}>
  50. <Text style={styles.TitleText}>{this.state.title}</Text>
  51. <Text style={styles.SubTitle}>{this.state.subTitle}</Text>
  52. </View>
  53. <Image style={styles.MineLeftLineImageView} source={require('../../resources/images/BaseNavigationBar/阴影分割.png')}/>
  54. <TouchableOpacity onPress={() => {
  55. this.props.didClickedMineItem()
  56. }} style={styles.MineBgView}>
  57. <Image style={styles.MineImageView} source={require('../../resources/images/BaseNavigationBar/icon-mine.png')}/>
  58. </TouchableOpacity>
  59. </View>
  60. <View style={styles.BottomLineView} />
  61. </View>
  62. );
  63. }
  64. }
  65. const styles = StyleSheet.create({
  66. View: {
  67. position: 'absolute',
  68. left: 0,
  69. top: 0,
  70. height: NavigationBarHeight.height,
  71. width: ScreenDimensions.width,
  72. backgroundColor: "#ffffff",
  73. shadowColor: "#eeeeee",
  74. shadowOffset: {
  75. width: 0,
  76. height: -1
  77. },
  78. shadowRadius: 0,
  79. shadowOpacity: 1,
  80. flexDirection: 'row',
  81. alignItems: 'center',
  82. justifyContent: 'space-between',
  83. elevation: 5, //only for android
  84. },
  85. NavigationBarView: {
  86. marginTop: Platform.OS === 'ios' ? 20 : 0,
  87. width: ScreenDimensions.width,
  88. height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
  89. flexDirection: 'row',
  90. justifyContent: 'space-between',
  91. alignItems: 'center',
  92. },
  93. LeftView: {
  94. marginLeft: 15,
  95. justifyContent: 'center',
  96. flexDirection: 'row',
  97. alignItems: 'center'
  98. },
  99. LeftText: {
  100. fontSize: 14,
  101. color: '#999999',
  102. marginLeft: 5,
  103. },
  104. TitleView: {
  105. flexDirection: 'row',
  106. alignItems: 'center',
  107. },
  108. TitleText: {
  109. fontSize: 18,
  110. color: '#333333',
  111. marginRight: 8
  112. },
  113. SubTitle: {
  114. fontSize: 14,
  115. color: '#999999'
  116. },
  117. MineBgView: {
  118. width: (Platform.OS === 'ios' ? 44 : 56),
  119. height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
  120. flexDirection: 'row',
  121. alignItems: 'center',
  122. },
  123. MineImageView: {
  124. width: 21,
  125. height: 22,
  126. marginLeft: Platform.OS === 'ios' ? 10 : 15
  127. },
  128. MineLeftLineImageView: {
  129. height: 30,
  130. width: 11,
  131. position: 'absolute',
  132. top: Platform.OS === 'ios' ? 9 : 13,
  133. right: Platform.OS === 'ios' ? 44 : 56
  134. },
  135. BottomLineView: {
  136. width: ScreenDimensions.width,
  137. height: 0.5,
  138. backgroundColor: '#cacaca',
  139. position: 'absolute',
  140. left: 0,
  141. bottom: 0,
  142. }
  143. })