이 프로젝트 는 WebView 입 니 다. 혹시 Web 구성 요소, Android, iOS 지원, auto height 고도 적응 및 html 페이지 와 RN 구성 요소 간 calljs 상호 호출 js 방법, very useful & easy! React - native 원생 웹 뷰 구성 요소 순수 js 구현, 이름 은 React - native - webview 2 혹시 WebView 혹시 Web.
react-native-webview2 속성 을 설정 하면 source = {uri: xxx} 시 웹 뷰 를 동적 으로 변경 할 수 있 습 니 다. 의 높이 (현재 source = {html} 은 지원 되 지 않 습 니 다). 그러나 속성 style = {height: xxx} 을 설정 하면 높이 에 적응 할 수 없습니다. 높이 를 설정 한 후 높이 는 고정 되 어 있 습 니 다.
react-native-webview2 html 페이지 와 reactnative 사이 에서 js 코드 를 서로 호출 할 수도 있 습 니 다.rn 구성 요소 에서 html 페이지 의 js 를 호출 하려 면 rn 구성 요소 에서 this. web. evalJs ("js code... here") 를 호출 해 야 합 니 다. ，react - native 코드 를 호출 하려 면 html 페이지 에서 만 호출 하 십시오. returnEval ("rn code... here") 과 함께 이 구성 요소 의 속성 evalReturn = {(r) = > {eval (r)} 을 설정 해 야 합 니 다.
react - native - webview 2 는 모든 다른 원생 반응 Native 를 지원 합 니 다. WebView 의 속성 입 니 다.
WebView 예제 항목: https://github.com/greatbsky/react-native-webview2-demo WebView 예제 WebView 사용 방법
집행 npm install react-native-webview2 --save
코드 작성:
import Web from 'react-native-webview2';
{this.web = c}}
evalReturn={(r) => {eval(r)}
source={{uri: 'xxx'}}
style={[styles.web, {minHeight: 300}]}
...other props
/>
전체 예시 코드: https://github.com/greatbsky/react-native-webview2-demo/blob/master/WebView2App/app.js
WebView 배치 하 다. 새로 추 가 된 속성
evalJs: react - native 에서 html 페이지 의 js 를 호출 하 는 방법. 예 를 들 어: this.web.evalJs('var t = document.title; alert(t)');
evalReturn: html 페이지 에서 react - native 를 호출 하 는 방법 이 필요 하 다 면 이 속성 은 필요 합 니 다. 고정 쓰기: evalReturn = {(r) = > {eval (r)}.
go: 새로운 url 을 엽 니 다. 예 를 들 어: this.web.go('http://xxxxxx');
기타
returnEval: html 페이지 의 한 function 에서 html 페이지 에서 react - native 방법 을 호출 할 때 사용 하 는 js 방법, 예 를 들 어 returnEval ('this. setText ("from html page...")
Licensed MIT License
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
