[React Native Android 앙 리 시리즈]RN 에 서 는 js 를 사용 하여 자바 코드 를 호출 합 니 다.

react-native-android 시리즈 튜 토리 얼 을 시청 하 시 는 것 을 환영 합 니 다.본 시리즈 튜 토리 얼 에 따라 공부 하면 react-native-android 의 개발 에 능숙 할 수 있 습 니 다.가 질 만 한 가치 가 있 습 니 다.
https://segmentfault.com/blog...
책 은 다음 절 에 있 습 니 다.우 리 는 지난 절 에'원생 안 드 로 이 드 의 activity 간 의 도약 을 어떻게 통제 하 는 지'라 고 말 했 습 니 다.이번 에는 js 로 이 과정 을 조작 해 보 겠 습 니 다.
1.응용 프로그램 에 js 호출 가능 한 자바 인 터 페 이 스 를 추가 합 니 다.
js 를 사용 하여 자바 를 호출 하려 면 우리 의 첫 번 째 단 계 는 당연히 js 가 호출 할 수 있 는 자바 인 터 페 이 스 를 제공 하 는 것 입 니 다.
1.1 점프 함수 제공
우선,지난 절의 생각 에 따라 우 리 는 activity 간 의 점프 를 하나의 함수 로 포장 하여 MainActivity 에 넣 습 니 다.다음 과 같다.

public class MainActivity extends ReactActivity {

    public void skip() {
        Intent intent = new Intent(this, DetailActivity.class);
        startActivity(intent);
    }
....
}

1.2 우리 가 호출 해 야 할 자바 코드 를 저장 하기 위해 새로운 클래스 를 만 듭 니 다.
이어서 우 리 는 ReactContextBaseJavaModule 이라는 추상 적 인 종 류 를 계승 하기 위해 새로운 클래스(MyExtension)를 만들어 야 한다.그 다음 에 우리 가 새로 만 든 클래스 는 우리 가 js 에 노출 되 는 방법 을 담 을 수 있다.우리 이 종 류 를 쓰기 시작 합 시다.
1.2.1 새로운 가방---extension,그림 1.2.1 참조
그림 1.2.1
1.2.2 가방 아래 에 새로운 클래스-MyExtension 을 만 듭 니 다.그림 1.2.2 참조
그림 1.2.2
코드 는 다음 과 같 습 니 다:

package com.hellowreact.extension;

import android.content.Intent;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.hellowreact.DetailActivity;
import com.hellowreact.MainActivity;

/**
 * Created by baidu on 16/6/12.
 */
public class MyExtension extends ReactContextBaseJavaModule {
    public MyExtension(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @ReactMethod
    public void open() {
        MainActivity activity = (MainActivity) getCurrentActivity();
        activity.skip();
    }

    @Override
    public String getName() {
        return "MyExtension";
    }
}

여기 몇 가지 사항 이 있 습 니 다.주의 하 세 요.
1.우 리 는 ReactContextBaseJavaModule 이라는 추상 적 인 종 류 를 계승 합 니 다.
2.getName 방법 을 다시 써 서 확장 자 를 명명 해 야 합 니 다.앞으로 우 리 는 js 에서 이름 에 따라 이 확장 자 를 찾 을 수 있다.
3.우 리 는 open 방법 을 썼 다.이 방법 은 미래 에 우리 의 js 로 내 보 내 고 js 에 의 해 호출 될 수 있 는 방법 이다.
1.3 쓰기 등록 인터페이스 사용 대기
우 리 는 방법 을 다 썼 습 니 다.이어서 우 리 는 등록 해 야 합 니 다.우 리 는 extension 가방 안에 있 습 니 다.새로운 클래스(Extension Package)를 만 들 었 습 니 다.코드 는 다음 과 같 습 니 다.

package com.hellowreact.extension;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * Created by baidu on 16/6/12.
 */
public class ExtensionPackage implements ReactPackage {
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new MyExtension(reactContext));
        return modules;
    }

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

이때 우리 의 디 렉 터 리 구 조 는 이렇게 보 여야 한다.그림 1.3.1 그림 1.3.1 참조.
1.4 기 록 된 인 터 페 이 스 를 MainActivity 에 등록 합 니 다.
이어서,우 리 는 MainActivity 에서 우리 가 쓴 이 인 터 페 이 스 를 등록 해 야 한다.우리 의 MainActivity 를 엽 니 다.그 중 에 이미 쓴 방법 이 있 습 니 다- getPackages,그림 1.4.1 그림 1.4.1 에서 우리 가 쓴 인터페이스(ExtensionPackage)를 추가 합 니 다.
2.app 을 다시 실행 하고 js 에서 인터페이스 가 js 에 존재 하 는 지 확인 합 니 다.
상술 한 절차 가 끝 난 후에 우리 의 인터페이스 가 이미 도 출 되 었 다 는 것 을 의미 하 며,다음 에 우 리 는 먼저 검증 해 야 한다.index.android.js 를 열 고 require 모듈 에 NativeModules(그림 2.1)그림 2.1 을 추가 합 니 다.
NativeModules 에는 우리 가 호출 할 수 있 는 native 모듈 이 저장 되 어 있 습 니 다.그때 우리 의 확장 을 정의 할 때 지은 이름 이 무엇 인지 기억 하 십 니까?그림 2.2
맞다!바로"MyExtension"입 니 다.이미 등 록 된 이상 js 에서 이미 있 는 지 확인 해 보 겠 습 니 다.우 리 는 한 곳 을 골 라 서(이 예 에서 사용 하 는 것 은 constructor 에서)인쇄 를 해서 이미 있 는 지 확인 합 시다(그림 2.3 참조).그림 2.3
우 리 는 debug js 를 사용 하여 chrome 에서 디 버 깅 인터페이스 를 조정 합 니 다(만약 아직 사용 하지 않 는 다 면 다음 장 에서 상세 하 게 설명 할 것 입 니 다.나 를 따라 변 수 를 보면 됩 니 다.그림 2.4 참조):그림 2.4
다음 그림 2.5 를 볼 수 있 습 니 다.우 리 는 그 당시 에 우리 가 내 보 낸 open 함수:그림 2.5 를 성공 적 으로 보 았 습 니 다.
good！！！
3.우리 가 내 보 낸 open 방법 을 호출 하려 고 시도 합 니 다.
이전 단계 에서,우 리 는 우리 가 자바 에서 정의 한 오픈 방법 을 콘 솔 에서 볼 수 있다 는 것 을 놀 라 게 보 았 다.다음,우 리 는 list 를 클릭 할 때 open 방법 을 호출 합 니 다.

class hellowReact extends Component {
  constructor(props) {
    console.log(NativeModules.MyExtension);
    super(props);
    var list = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = { 
      list: list.cloneWithRows(['hello', 'react', 'this', 'is', 'my', 'listView'])
    };  
  }
  oneRow(oneItem) {
    return {oneItem};
  }
  seeDetail() {
    NativeModules.MyExtension.open();
  }
  render() {
    return (
      
          
      
    );  
  }
}

이어서 우 리 는 그림 3.1 과 그림 3.2 그림 3.1 그림 3.2 와 같은 효 과 를 다시 실행 합 니 다.
그래서 우 리 는 운행 의 효 과 를 보 았 다.다음 장 에 서 는 react-native 에서 js 가 네 이 티 브 코드 를 호출 하 는 원 리 를 함께 살 펴 보 겠 습 니 다.
본문 에서 사용 한 예 는 여기 서 찾 을 수 있다.
https://github.com/houyu01/re...
다음 절 에 우 리 는 상기 호출 된 RN 바 텀 원 리 를 함께 토론 할 것 이다.매우 간단명료 하고 이해 하기 쉬 우 니 놓 치지 마라.
오리지널 글,판권 소유,전재 출처 를 밝 혀 주 십시오.