React Native는 iOS 및 Android에서 JavaScript를 네이티브로 실행할 수 있도록 하기 위해 무엇을 사용합니까?

React Native는 iOS 및 Android에서 JavaScript를 네이티브로 실행할 수 있도록 하기 위해 무엇을 사용합니까?

React Native는 iOS 및 Android와 인터페이스하기 위해 커버 아래에서 무엇을 사용합니까?Cordova는 WebView를 사용하여 네이티브 컨테이너 내의 웹 페이지를 효과적으로 표시합니다.React Native도 같은 접근방식을 사용하고 있습니까?그렇지 않은 경우 어떤 접근 방식을 사용합니까?

React Native는 Cordova를 기반으로 하지 않습니다.웹뷰에 삽입된 앱처럼 보이는 웹사이트가 아닙니다.

React Native는 JavaScript 런타임을 사용하지만 UI는 HTML이 아니며 WebView를 사용하지 않습니다.UI를 정의하려면 JSX 및 React Native 특정 구성 요소를 사용합니다.

네이티브 수준의 성능과 외관 및 느낌을 제공하지만 일부 UI 부분은 iOS와 Android용으로 별도로 구성해야 합니다.예를 들어 툴바는 완전히 다르지만 TextInput은 두 운영체제에서 동일하게 사용할 수 있습니다.

새로운 업데이트에 대해서는 @f4z3k4s 답변을 참조하십시오.

React Native 앱은 Native 파트와 Javascript 파트 두 부분으로 구성되어 있습니다.

Javascript를 실행하려면

React Native는 Android/iOS 시뮬레이터 및 디바이스에서 JavaScriptCore(Safari의 JavaScript 엔진)를 사용합니다.

Android의 경우 React Native는 애플리케이션과 함께 JavaScriptCore를 번들합니다.

iOS의 경우 React Native는 iOS 플랫폼에서 제공하는 JavaScriptCore를 사용합니다.

Javascript를 네이티브 부품과 통신하려면

Respect Native 브릿지가 사용됩니다.Native 스레드와 Javascript 스레드 간의 통신을 담당하는 계층입니다.C++/Java로 되어 있습니다.

관련된 순서

실행 후react-native run-ios ★★★★★★★★★★★★★★★★★」react-native run-android

1. Respect Native CLI는 javascript 코드를 단일로 번들하는 노드 패키지/번들러(메트로)를 생성합니다.main.bundle.jsfilename을 클릭합니다.
2. React Native CLI는 React Native 앱을 시작하고 먼저 앱의 네이티브 진입점을 로드합니다.
3. 네이티브 스레드는 JavascriptCore 스레드를 생성합니다.
4. 이제 네이티브 스레드가 RN Bridge를 통해 메시지를 전송하여 Javascript 앱을 시작합니다.
5. Javascript 스레드는 RN 브릿지를 통해 네이티브 스레드에 명령을 발행하기 시작합니다.순서에는 로드하는 뷰, 하드웨어에서 취득하는 정보 등이 포함됩니다.
6. Native 스레드는 이러한 작업을 수행하고 그 결과를 Javascript 스레드로 전송하여 작업이 수행되었음을 확인합니다.

원천

iOS 시뮬레이터와 디바이스에서 Android 에뮬레이터와 디바이스 React Native는 Safari를 구동하는 JavaScript 엔진인 JavaScriptCore를 사용합니다.출처

2022 업데이트

최근 React Native가 많이 바뀌었고 가까운 미래에 많은 변화가 있을 것이기 때문에 이 답변을 업데이트하는 것이 시기적절하다고 생각했습니다.

새로운 컴포넌트:

에르메스:

React Native 팀은 자체 개발한 Javascript Engine을 C++로 개발했습니다.이 엔진은 Hermes라고 불립니다.활성화 시 Hermes는 JSC가 아닌 Javascript를 실행하기 위한 컨텍스트로 앱과 함께 제공되며, 앱 번들을 더 작게 만들어 앱 실행 속도를 높일 수 있습니다.

JSI(Javascript 인터페이스):

이 계층은 (이론적으로) 모든 JavaScript 엔진을 위한 통합된 경량 범용 계층입니다.엔진과 마찬가지로 C++로 구현되지만 엔진과 분리됩니다.이를 통해 JS 스레드 상의 네이티브 객체의 참조를 유지할 수 있게 되어 브리지의 필요성이 없어집니다.따라서 스트링화가 현재 병목현상이기 때문에 모든 것을 스트링화할 필요가 없어지고 리액트 네이티브를 고속화할 수 있습니다.또한 JS 엔진 간 전환도 용이합니다.JSI는 C++로 개발되어 개발자들이 안드로이드와 iOS 간에 네이티브 코드를 공유하기 쉬워졌습니다.예를 들어, JSI의 도움을 받아 iOS와 Android 모두에서 네이티브 코드를 개발할 수 있습니다.두 플랫폼 모두 C++ 코드를 실행할 수 있으며 iOS는 C의 슈퍼셋이기 때문에 목표 C를 통해 매우 쉽게 사용할 수 있습니다.Android는 Android NDK(Native Development Kit)와 JNI(Java Native Interface, Java <=> C++번역 담당)의 도움을 받아 좀 더 많은 작업이 필요합니다.

브릿지가 두 부분으로 분할됩니다. 자세한 내용은 다음을 참조하십시오.

터보 모듈

이는 네이티브 측과 상호 작용하는 새로운 방법으로, JSI와 상호 운용이 가능합니다.패키지의 초기화를 늦출 수 있어 네이티브 의존관계가 많은 앱의 기동시간을 단축할 수 있습니다.

패브릭 렌더러

JSI 및 Turbo 모듈과 상호 운용 가능한 UI 매니저의 재구축.이전에는 요소의 레이아웃 계산에 사용되었던 섀도우 트리(또는 섀도우 스레드)가 아닌 Fabric에서는 새로운 강력한 JSI 기능을 사용하여 아무것도 문자열화하지 않고 UI를 렌더링할 수 있습니다.이것에 의해, 진정한 네이티브급의 퍼포먼스가 실현됩니다.

기타:

코드 생성

입력된 JavaScript(Typescript 또는 Flow)를 진실 소스로 사용함으로써 Fabric 및 Turbo Modules에 필요한 인터페이스 파일을 생성할 수 있습니다.

원래 질문에 대한 새로운 답변:

React Native는 Javascript 측에서 React를 사용하여 개발자가 애플리케이션을 개발할 수 있도록 합니다.웹상의 리액트 렌더링 컨텍스트인 HTML 대신 리액트 네이티브는 패브릭을 렌더러로 사용합니다.렌더는 C++ 렌더러이며, 최종적으로 리액트 네이티브 애플리케이션의 UI 스레드(네이티브)에 네이티브 요소를 렌더링합니다.UI 스레드와 JS 스레드 간의 브리지와 스트링화를 사용하여 데이터를 전달했던 이전 모델과 달리 JSI라고 하는 새로운 어댑터 레이어가 구현되어 JS에서 C++ 객체의 참조를 유지할 수 있습니다.따라서 React Native 애플리케이션의 진실한 출처는 C++ 세계에서 유지되며, 이를 통해 네이티브와 JS 측 모두 동기화된 방식으로 문자열화할 필요 없이 둘 간에 데이터를 공유할 수 있습니다.

언급URL : https://stackoverflow.com/questions/33479180/what-does-react-native-use-to-allow-javascript-to-be-executed-on-ios-and-android