【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 =
      <TouchableHighlight
        onPress={() => {
          actions.loginState()
          Actions.Login()
        }} >
        <Text>{I18n.t('LoginRender.already_have_account')}</Text>
      </TouchableHighlight>


    let register =
      <TouchableHighlight
        onPress={() => {
          actions.registerState()
          Actions.Register()
        }} >
        <Text>{I18n.t('LoginRender.register')}</Text>
      </TouchableHighlight>


    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 = <Text />
    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 =
        <ItemCheckbox
          text={I18n.t('LoginRender.show_password')}
          disabled={this.props.auth.form.isFetching}
          onCheck={() => {
            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 (
      <View style={styles.inputs}>
        <LoginForm
          formType={formType}
          form={this.props.auth.form}
          value={this.state.value}
          onChange={self.onChange.bind(self)} />
     {passwordCheckbox}
      </View>
    )
  }

  // 調用

  // 通過枚舉類型來區分左右顯示內容
  <LoginRender
      ...
      displayPasswordCheckbox={false} // 是否顯示【記住密碼】
      leftMessageType={REGISTER}    // 左邊顯示【註冊】
      rightMessageType={LOGIN}      // 右邊顯示【登錄】
      ...
    />