ReactNative代码学习

Posted 2022-10-17 Teng的世界

// 代码分析: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      // 右边显示【登录】
      ...
    />