React Native 다단계 연결을 캡슐화하는 방법(코드 구현)

이 글의 내용은 React Native 다단계 연결(코드 구현)을 캡슐화하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Background

최근 보조연동 기능이 필요한 프로젝트가 있었나봐요!
원래는 패키지가 완성된 후 별을 벌기 위해 github에 올리고 싶었는데 이미 시장에 비교적 성숙한 것들이 있다는 걸 발견하고 개발하기 전에 왜 검색을 안 했는지 (프로젝트가 급해서요. ). 이제 포장이 끝났으니 이제 과정에 대해 이야기해볼까요

작업이 시작됩니다

1. 프로토타입 또는 디자인 도면

컴포넌트를 패키징하기 전에 먼저 컴포넌트가 어떻게 보이는지 알아야 합니다. like 및 전체적인 개요

2. 구조를 구상하세요

포장하기 전에 생각해보세요

1. 이 구성 요소가 달성해야 하는 기능은 무엇인가요?

첫 번째 레벨을 변경하면 그에 따라 두 번째 레벨도 변경되고, 두 번째 레벨도 변경되고, 세 번째 레벨도 변경되는 식으로 선택해야 하는 항목을 지정할 수 있으며, 값을 동적으로 변경할 수 있습니다. 각 레벨마다 온디맨드 로딩을 ​​지원합니다

2. 노출되는 API는 무엇인가요?

// 已封装的组件（Pickers.js）
import React, { Component } from 'react'
import Pickers from './Pickers'

class Screen extends Component {
  constructor (props) {
    super(props)
    this.state = {
      defaultIndexs: [1, 0], // 指定选择每一级的第几项，可以不填不传，默认为0(第一项)
      visible: true,  // 
      options: [ // 选项数据，label为显示的名称，children为下一级，按需加载直接改变options的值就行了
        {
          label: 'A',
          children: [
            {
              label: 'J'
            },
            {
              label: 'K'
            }
          ]
        },
        {
          label: 'B',
          children: [
            {
              label: 'X'
            },
            {
              label: 'Y'
            }
          ]
        }
      ]
    }
  }
  onChange(arr) { // 选中项改变时触发, arr为当前每一级选中项索引，如选中B和Y，此时的arr就等于[1,1]
    console.log(arr)
  }
  onOk(arr) { // 最终确认时触发，arr同上
    console.log(arr)
  }
  render() {
    return (
      <view>
        <pickers>
        </pickers>
      </view>
    )
  }
}

초기에는 캡슐화 과정에서 API가 추가되고 수정되는 경우가 많아 실제 상황에 따라 유연하게 조정할 수 있습니다

3. 어떻게 하면 사용자가 더 편리하게 사용할 수 있을까요?

현재 널리 사용되는 데이터 구조와 스타일(다른 구성 요소에서 학습 가능)을 사용하면 인터페이스 이름 정의가 한눈에 명확해집니다.

4 어떻게 더 많은 시나리오에 적용할 수 있나요?

비즈니스가 아닌 기능만 캡슐화합니다

3. 코드 작성 시작

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native'

class Pickers extends Component {
  static propTypes = {
    options: PropTypes.array,
    defaultIndexs: PropTypes.array,
    onClose: PropTypes.func,
    onChange: PropTypes.func,
    onOk: PropTypes.func,
  }

  constructor (props) {
    super(props)
    this.state = {
      options: props.options, // 选项数据
      indexs: props.defaultIndexs || [] // 当前选择的是每一级的每一项，如[1, 0]，第一级的第2项，第二级的第一项
    }
    this.close = this.close.bind(this) // 指定this
    this.ok = this.ok.bind(this) // 指定this
  }
  close () { // 取消按钮事件
    this.props.onClose && this.props.onClose()
  }

  ok () { // 确认按钮事件
    this.props.onOk && this.props.onOk(this.state.indexs)
  }
  onChange () { // 选项变化的回调函数

  }
  renderItems () { // 拼装选择项组

  }

  render() {
    return (
      <view>
        <touchableopacity>
          <touchableopacity>
            <view>
              {this.renderItems()}
            </view>
            <view>
              <touchableopacity>
                <text>取消</text>
              </touchableopacity>
              <touchableopacity>
                <text>确认</text>
              </touchableopacity>
            </view>
          </touchableopacity>
        </touchableopacity>
      </view>
    )
  }
}

선택 항목 그룹의 집합이 핵심 기능이며 관리 및 향후 유지 관리를 용이하게 하기 위해 별도의 기능(renderItems)을 제안합니다. 단일 선택 항목 구성 요소인 React Native의 내장 Picker는 Android와 IOS에서 스타일이 다릅니다. 제품 요구 사항이 동일한 경우 PickerItem에서 변경하면 됩니다. 이는 PickerItem과 동일합니다. 독립적이고 유지 관리가 매우 편리합니다.

 renderItems () { // 拼装选择项组
    const items = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几级
      if (arr && arr.length > 0) {
        const childIndex = indexs[index] || 0 // 当前级指定选中第几项,默认为第一项
        items.push({
          defaultIndex: childIndex,
          values: arr //当前级的选项列表
        })
        if (arr[childIndex] && arr[childIndex].children) {
          const nextIndex = index + 1
          re(arr[childIndex].children, nextIndex)
        }
      }
    }
    re(options, 0) // re为一个递归函数
    return items.map((obj, index) => {
      return ( // PickerItem为单个选择项,list为选项列表，defaultIndex为指定选择第几项，onChange选中选项改变时回调函数，itemIndex选中的第几项，index为第几级，如（2, 1）为选中第二级的第三项
        <pickeritem> { this.onChange(itemIndex, index)}}
          />
      )
    })
  }</pickeritem>

renderItems()의 PickerItem에 대한 콜백 함수

// 单个选项
class PickerItem extends Component {
  static propTypes = {
    list: PropTypes.array,
    onChange: PropTypes.func,
    defaultIndex: PropTypes.number,
  }

  static getDerivedStateFromProps(nextProps, prevState) { // list选项列表和defaultIndex变化之后重新渲染
    if (nextProps.list !== prevState.list ||
        nextProps.defaultIndex !== prevState.defaultIndex) {
      return {
        list: nextProps.list,
        index: nextProps.defaultIndex
      }
    }
    return null
  }

  constructor (props) {
    super(props)
    this.state = {
      list: props.list,
      index: props.defaultIndex
    }
    this.onValueChange = this.onValueChange.bind(this)
  }

  onValueChange (itemValue, itemIndex) {
    this.setState( // setState不是立即渲染
      {
        index: itemIndex
      },
      () => {
        this.props.onChange && this.props.onChange(itemIndex)
      })

  }

  render() {
    // Picker的接口直接看react native的文档https://reactnative.cn/docs/picker/
    const { list = [], index = 0 } = this.state
    const value = list[index]
    const Items = list.map((obj, index) => {
      return <picker.item></picker.item>
    })
    return (
      <picker>
        {Items}
      </picker>
    )
  }
}

요약

시장에는 성숙한 다단계 연결이 많이 있습니다. 기능 요구 사항이 상대적으로 높으면 권장됩니다. 성숙한 구성요소를 사용하여 개발 비용을 낮추고 문서가 완전하며 팀의 다른 사람들이 쉽게 인계할 수 있도록 합니다. 아주 간단한 기능만 사용한다면 빠르게 개발할 수 있으니, 직접 개발하는 것이 좋습니다. 특별한 커스터마이징을 원한다면 직접 개발하면 됩니다. 위의 상황과 상관없이 내부의 작동 원리를 이해하는 것이 좋습니다. 주요 설명은 코드에 직접 복사하여 해당 값을 얻을 수도 있습니다. 획득한 인덱스를 통해 해당 값을 바로 확인할 수 있습니다

전체 코드

 onChange (itemIndex, currentIndex) { // itemIndex选中的是第几项，currentIndex第几级发生了变化
    const indexArr = []
    const { options = [], indexs = [] } = this.state
    const re = (arr, index) => { // index为第几层,循环每一级
      if (arr && arr.length > 0) {
        let childIndex
        if (index  {
        this.props.onChange && this.props.onChange(indexArr)
      }
    )
  }

위 내용은 React Native 다단계 연결을 캡슐화하는 방법(코드 구현)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!