ios 원생 과 react-native 의 다양한 상호작용 예시 코드

필요:표 보기 의 cell 을 왼쪽 으로 미 끄 러 뜨 려 삭제 할 수 있 도록 합 니 다.효과 도 는 다음 과 같 습 니 다.

현재 RN 의 ListView 주요 문 제 는 재 활용 과 색인 보기,왼쪽 슬라이딩 삭제,편집 등 다른 세부 사항 이다.RN 에서 네 이 티 브 를 구현 하 는 이러한 효 과 를 사용자 정의 하려 면 아직도 문제 가 있다.필요 할 때 네 이 티 브 UITableView 를 사용 하여 RN 에서 데 이 터 를 전달 하 는 것 을 고려 할 수 있다.
1.원생 단 작성 표 컨트롤 러 NativeTableView Controller,노출 된 속성 은 다음 과 같 습 니 다.

datas 는 표 데이터 원본 이 고,다른 하 나 는 RN 호출 에 노출 되 어야 하 는 방법 입 니 다.
2.프레임 워 크 는 RN 엔 드 에 노출 된 인터페이스 만 제공 하기 때문에 중간 UIView 보 기 를 만들어 야 합 니 다.이 UIView 의.h 파일 은 컨트롤 러 와 완전히 일치 합 니 다.m 는 다음 과 같 습 니 다.

보기 가 초기 화 될 때 컨트롤 러 를 만 들 고 컨트롤 러 의 view 를 하위 보기 로 추가 합 니 다.표시 할 때 컨트롤 러 의 보기 입 니 다.setDatas 와 change BackgroundColor 방법 은 링크 역할 만 할 뿐 실제 적 으로 호출 된 컨트롤 러 방법 입 니 다.
3.UIView 보 기 를 RN 에 노출 하려 면 RCTviewManager 의 하위 클래스 를 사용 해 야 합 니 다.RCTviewManager 가 프레임 워 크 에 제공 하 는 네 이 티 브 보기 관리 류 는 RCTBridge Module 인 터 페 이 스 를 실현 하여 해당 UIView 를 브리지 파일 에 자동 으로 등록 합 니 다.자 류 는 두 가지 방법 을 실현 해 야 한다.

.h 파일

파일

파일
매크로 RCTEXPORT_VIEW_PROPERTY 는 이 관리 클래스 가 관리 하 는 그 보기,즉 방법-(UIView*)view 가 되 돌려 주 는 그 보기 의 속성 을 노출 시 키 는 것 입 니 다.js 단 에서 이 속성 을 설정 할 때 속성 을 촉발 하 는 setter 방법,즉 NativeTableView 에서 이 루어 진-(void)setDatas:(NSArray*)datas 를 사용 하여 컨트롤 러 의 setDatas 방법 을 터치 하여 표를 새로 고 칩 니 다.
4.js 단 호출.네 이 티 브 엔 드 에 노출 된 보 기 를 다음 과 같이 패키지 합 니 다.기본 적 인 상황 에서 requireNativeComponent 방법의 첫 번 째 매개 변 수 는 네 이 티 브 엔 드 의 클래스 가 아 닙 니 다.

아래 와 같이 사용 하려 면 너비 와 높이 를 설정 해 야 합 니 다.

5.현재 보기 의 디 스 플레이 가 완료 되 었 습 니 다.이벤트 리 셋 이 부족 합 니 다.여기 에는 두 가지 이벤트 가 있 습 니 다.트리거 조건 이 다 릅 니 다.
a.js 엔 드 이벤트 구동,예:js 엔 드 에서 네 이 티 브 표 컨트롤 러 를 호출 하 는 changeBackgroundColor 방법
b.네 이 티 브 엔 드 이벤트 구동,예 를 들 어 네 이 티 브 cell 왼쪽 미끄럼,삭제 단 추 를 누 르 면 js 엔 드 데이터 원본 데이터 변 화 를 촉발 하여 페이지 를 새로 고침 합 니 다.
a 이벤트 프로젝트:
RCT_EXPORT_METHOD 宏 은 원생 단 방법 을 js 단 에 노출 할 수 있 으 며,js 는 직접 호출 하면 된다.그렇다면 이 방법 에서 어떻게 해 야 목표 보기 NativeTableView 를 얻 고 change BackgroundColor 방법 을 사용 할 수 있 습 니까?
우리 가 다시 쓰 는 부모 클래스 방법-(UIView*)view 를 분명히 보 았 습 니 다.여기 서 NativeTableView 를 얻 을 수 있 습 니 다.그러나 호출 할 때마다 새로운 보 기 를 되 돌려 줍 니 다.그러면 이 보 기 를 버퍼 링 한 다음 에 매번 같은 보 기 를 되 돌려 줄 수 있 습 니까?이상 이 풍만 하고 현실 이 뼈 있 으 며 공식 문 서 를 본다.

분명히 이 보기 로 바 꿀 수 없습니다.이 유 는 저도 잘 모 르 겠 어 요.
원본 코드 를 보면 등 록 된 모든 보기 에 번호 tag 가 있 음 을 알 수 있 습 니 다.원본 보기 등록 시 생 성 된 tag 만 알 면 보기 관리 류 RCTUIManager 에서 찾 을 수 있 습 니 다.다음은 최종 구현 코드 입 니 다.

js 단 호출 은 다음 과 같 습 니 다:

findNode Handle 방법 은 react-native 라 이브 러 리 에서 직접 내 보 내 고 보기 의 tag 를 찾 습 니 다.

b 이벤트 프로젝트:
네 이 티 브 엔 드 이벤트 알림 js 엔 드,RCTEventEmitter 사용.


네 이 티 브 이벤트 가 실 행 될 때 다음 과 같이 호출 합 니 다:

컨트롤 러 NativeTableView 컨트롤 러 의 에이전트 방법 구현
js 단 감청 원생 호출 사건 은 다음 과 같 습 니 다.


흐름 은:
1.js 단 등록 감청 원생 단 알림
2.원생 단 표 에이전트 방법 으로 사건 을 촉발 하고 RativeTOJSeventEmitter 를 호출 하여 알림 을 보 냅 니 다.
3.js 단 감 이 알림 을 듣 고 리 셋 을 촉발 하고 데 이 터 를 처리 하 며 다시 보기 새로 고침
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.