123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- /**
- * Created by zack on 2018/5/22.
- */
- import {
- View,
- Text,
- StyleSheet,
- FlatList,
- Platform,
- TouchableOpacity,
- Image,
- ImageBackground
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'
-
- export default class FollowPageViewNavigationBar extends Component {
- constructor(props) {
- super(props)
- this.state = {
- userName: props.userName,
- userIcon: props.userIcon
- }
- }
-
- componentWillReceiveProps(props) {
- this.setState({
- userName: props.userName,
- userIcon: props.userIcon
- })
- }
-
- shouldComponentUpdate(nextProps) {
- if (nextProps.userName !== this.state.userName ||
- nextProps.userIcon !== this.state.userIcon
- ) {
- return true
- }
-
- return false
- }
-
- renderUserIcon(userIcon) {
- if (userIcon && userIcon.length) {
- return(
- <View>
- <ImageBackground imageStyle = {{borderRadius: 18,}} source={{uri: userIcon}} style={[styles.TitleHeaderImageView, {flexDirection: 'column-reverse', alignItems: 'flex-end'}]}>
- <Image source={require('../../../../resources/images/TabBar/PicAndText/follow.png')}/>
- </ImageBackground>
- </View>
- )
- }else {
- return <View />
- }
- }
-
- render() {
- return (
- <View style={styles.View}>
- <View style={styles.NavigationBarView}>
- <TouchableOpacity onPress={() => {
- this.props.didClickLeftButton()
- }} style={styles.LeftView}>
- <Image source={require("../../../../resources/images/TabBar/Community/Follow/left.png")}/>
- <Text style={styles.LeftText}>{this.state.leftTitle}</Text>
- </TouchableOpacity>
-
- <View style={styles.TitleHeaderBgView}>
- {this.renderUserIcon(this.state.userIcon)}
- <Text style={styles.TitleHeaderUserName}>{this.state.userName}</Text>
- </View>
-
- <TouchableOpacity style={styles.RightButton}>
- <Image source={require('../../../../resources/images/TabBar/PicAndText/more.png')}/>
- </TouchableOpacity>
-
- </View>
-
- <View style={styles.BottomLineView} />
- </View>
- );
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- position: 'absolute',
- left: 0,
- top: 0,
- height: NavigationBarHeight.height,
- width: ScreenDimensions.width,
- backgroundColor: "#ffffff",
- shadowColor: "#eeeeee",
- shadowOffset: {
- width: 0,
- height: -1
- },
- shadowRadius: 0,
- shadowOpacity: 1,
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
- elevation: 5, //only for android
- },
- NavigationBarView: {
- marginTop: Platform.OS === 'ios' ? 20 : 0,
- width: ScreenDimensions.width,
- height: Platform.OS === 'ios' ? (NavigationBarHeight.height - 20) : NavigationBarHeight.height,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- },
- LeftView: {
- left: 15,
- justifyContent: 'center',
- flexDirection: 'row',
- alignItems: 'center',
- position: 'absolute',
- },
- LeftText: {
- fontSize: 14,
- color: '#999999',
- marginLeft: 5,
- },
- BottomLineView: {
- width: ScreenDimensions.width,
- height: 0.5,
- backgroundColor: '#cacaca',
- position: 'absolute',
- left: 0,
- bottom: 0,
- },
- TitleHeaderBgView: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'center'
- },
- TitleHeaderImageView: {
- width: 36,
- height: 36,
- borderRadius: 16,
- },
- TitleHeaderUserName: {
- fontSize: 15,
- color: '#000000',
- marginLeft: 12
- },
- RightButton: {
- height: 30,
- width: 44,
- right: 20,
- flexDirection: 'row-reverse',
- position: 'absolute',
- alignItems: 'center'
- }
- })
|