react native 自定义的公用导航栏Navigator

export default class  Navigation extends Component {
     render () {
         // leftTitle和leftImage 优先判断leftTitle (即 文本按钮和图片按钮优先显示文本按钮)
            const {title,leftTitle,leftImage,leftAction,rightTitle,rightImage,rightAction} = this.props;
            return (
                <View style={styles.barView}>
                  <View style={styles.showView}>
                      {
                          (()=>{
                              if (leftTitle) {
                                  return <TouchableOpacity style={styles.leftNav} onPress={ ()=> {leftAction()}}>
                                        <View  style={{alignItems:'center'}}>
                                            <Text style={styles.barButton}>{leftTitle}</Text>
                                        </View>
                                     </TouchableOpacity>
                             } else if (leftImage) {
                                  return <TouchableOpacity style={styles.leftNav} onPress={ ()=> {leftAction()}}>
                                             <View style={{alignItems:'center'}}>
                                                 <Image source={leftImage}/>
                                             </View>
                                          </TouchableOpacity>
                              };
                          })()
                       }


                      {
                          (()=>{
                              if (title) {
                                  return <Text style={styles.title}>{title || ''} </Text>
                              }
                          })()
                      }

                      {
                          (()=>{
                              if (rightTitle) {
                                  return <TouchableOpacity style={styles.rightNav} onPress={ ()=> {rightAction()}}>
                                      <View  style={{alignItems:'center'}}>
                                          <Text style={styles.barButton}>{rightTitle}</Text>
                                      </View>
                                  </TouchableOpacity>
                              } else if (rightImage) {
                                  return <TouchableOpacity style={styles.rightNav} onPress={ ()=> {rightAction()}}>
                                      <View style={{alignItems:'center'}}>
                                          <Image style={styles.rightImg} source={rightImage}/>
                                      </View>
                                  </TouchableOpacity>
                              }
                          })()
                      }
                  </View>
                </View>
            )
     }
}



const styles =StyleSheet.create({
    barView:{
        height: Platform.OS === 'android' ? 44 : 64,
          Dimensions.get('window').width,
        backgroundColor:'#323136'
    },

    showView:{
        flex:1,
        marginLeft:px2dp(18),
        marginRight:px2dp(18),
        alignItems:'center',
        justifyContent: 'center',
        flexDirection: 'row',
        marginTop: Platform.OS === 'android' ? 0 :px2dp(20)

    },

    leftNav:{
        px2dp(20),
        height:px2dp(20)
    },
    rightNav:{
        position: 'absolute',
         top:px2dp(12),
         right:0,
         px2dp(18),
         height:px2dp(18),
        justifyContent:'center'
    },

    rightImg:{
        px2dp(18),
        height:px2dp(18),
        resizeMode:'stretch'
    },

    title:{
        fontSize:px2dp(16),
        color:'#fff',
    }
});