【ReactNative】代码学习(一)_react-native 学习代码-优快云博客

本文链接：https://blog.youkuaiyun.com/teng_ontheway/article/details/52456278

本文档详细介绍了在ReactNative中如何自定义组件，并根据传入参数显示不同消息。通过`getMessage`函数动态生成`TouchableHighlight`组件，实现登录与注册按钮切换。在`render`方法中，根据props设置显示内容，如`passwordCheckbox`。学习了如何在jsx中添加注释及使用变量记录jsx标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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