【ReactNative】代码学习(一)

// 代码分析:https://github.com/bartonhammond/snowflake
/**
  1.定制控件参数来区分显示内容
  2.过关开关来调用jsx标签变量
**/


/**
  *  Get the appropriate message for the current action
  *  @param messageType FORGOT_PASSWORD, or LOGIN, or REGISTER
  *  @param actions the action for the message type


    1.通过变量形式记录jsx标签,通过参数处理
    2.变量都使用let
  */
  getMessage (messageType, actions) {
    let alreadyHaveAccount =
       {
          actions.loginState()
          Actions.Login()
        }} >
        {I18n.t('LoginRender.already_have_account')}
      


    let register =
       {
          actions.registerState()
          Actions.Register()
        }} >
        {I18n.t('LoginRender.register')}
      


    switch (messageType) {
      case LOGIN:
        return alreadyHaveAccount
      case REGISTER:
        return register
    }
  }


  /**
   * ### render
   * Setup some default presentations and render
   * 风格:都没有使用分号结束
   * 风格:变量提前声明
   * 定制:根据传入的参数，来显示不同的jsx标签
   */
  render () {
    var leftMessageType = this.props.leftMessageType
    var rightMessageType = this.props.rightMessageType
    var displayPasswordCheckbox = this.props.displayPasswordCheckbox


    var passwordCheckbox = 
    let leftMessage = this.getMessage(leftMessageType, this.props.actions)
    let rightMessage = this.getMessage(rightMessageType, this.props.actions)


    /**
     * Toggle the display of the Password and PasswordAgain fields
     */
    if (displayPasswordCheckbox) {
      passwordCheckbox =
         {
            this.props.actions.onAuthFormFieldChange('showPassword', true)
          }}
          onUncheck={() => {
            this.props.actions.onAuthFormFieldChange('showPassword', false)
          }}
      />
    }


    /**
     * The LoginForm is now defined with the required fields. 
     * 学习:可以在render上方添加注释，因为jsx标签中无法添加注释
     */
    return (
      
        
     {passwordCheckbox}
      
    )
  }

  // 调用

  // 通过枚举类型来区分左右显示内容