처음 호출한 URL에서 다시 Redirect하는 경우에, 사용하면 navState를 정확히 파악할 수 있다. 

=> BackHandler 사용 시, canGoBack의 결과에 따라 앱을 종료하는 로직을 사용할 수 있음. 

 

onShouldStartLoadWithRequest

Function that allows custom handling of any web view requests. Return true from the function to continue loading the request and false to stop loading.

On Android, is not called on the first load.

TypeRequired

function No

Example:

<WebView source={{ uri: 'https://facebook.github.io/react-native' }} onShouldStartLoadWithRequest={request => { // Only allow navigating within this website return request.url.startsWith('https://facebook.github.io/react-native'); }} />

The request object includes these properties:

title url loading target canGoBack canGoForward lockIdentifier navigationType

반응형
반응형

 

':app@debug/compileClasspath': Could not resolve project :react-native-gesture-handler.

 

STEP1) npm install --save react-native-gesture-handler

STEP2) react-native link react-native-gesture-handler
info iOS module "react-native-gesture-handler" is already linked
info Android module "react-native-gesture-handler" is already linked

https://reactnavigation.org/docs/en/getting-started.html#installation

 

React Navigation · Routing and navigation for your React Native apps

Routing and navigation for your React Native apps

reactnavigation.org

 

 

반응형

"RNCWebView" was not found in the UIManger.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

step1. $ react-native link react-native-webview

step2. Android - react-native-webview version >=6.X.X: Please make sure AndroidX is enabled in your project by editting android/gradle.properties and adding 2 lines:

android.useAndroidX=true

android.enableJetifier=true

https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md

 

STEP3) error: package android.support.v4.util does not exist 

(https://github.com/react-native-community/react-native-webview/issues/580

3-1) react-native install react-native-webview@5.8.1

반응형
반응형

이슈 : NPM START 했을때 발생

원인 :  8081 PORT를 사용하는데, 해당포트가 이미 iis에 다른 서비스로 할당되어 있어서 접근 거부가 되었던 것.

해결 : 기존 iis에 설정해둔 포트를 다른 포트로 할당하고, 다시 실행. 

=>실행 잘된다! 

반응형

'Mobile > ReactNative' 카테고리의 다른 글

[RN] Invariant Violation: requireNativeComponents:  (0) 2019.05.22
[RN] React-Native Start : 1  (0) 2019.05.21
[ERROR] Unable to resolve "react-navigation" from "App.js"  (0) 2019.03.29
React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
반응형

'Mobile > ReactNative' 카테고리의 다른 글

[RN] React-Native Start : 1  (0) 2019.05.21
[RN] Error: listen EACCES: permission denied 0.0.0.0:8081  (0) 2019.05.21
React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
React 개발환경 구축  (0) 2019.02.25

Error: node_modules directory is missing. Please run `npm install` in your project directory.

Couldn't start project. Please fix the errors and restart the project.



반응형

'Mobile > ReactNative' 카테고리의 다른 글

[RN] Error: listen EACCES: permission denied 0.0.0.0:8081  (0) 2019.05.21
[ERROR] Unable to resolve "react-navigation" from "App.js"  (0) 2019.03.29
React Native (1)  (0) 2019.02.26
React 개발환경 구축  (0) 2019.02.25
Flutter Framework  (0) 2019.02.14

React Native 1 http://facebook.github.io/react-native/

네이티브 웹 어플리케이션을 빌드하게 도와주는 UI 라이브러리. (OBJECTIVE-C, JAVA)

HTML, CSS를 생성하지 않음. 

JSX, 자바스크립트로 작성 -> 컴파일링 시, ios/android 네이티브 코드로 실행 됨. 

즉, 브릿지역할임.


import React, {Component} from 'react'; import {Text, View} from 'react-native'; class HelloReactNative extends Component { render() { return ( <View> <Text> If you like React, you'll also like React Native. </Text> <Text> Instead of 'div' and 'span', you'll use native components like 'View' and 'Text'. </Text> </View> ); } }

장점 

1, 자바스크립트를 사용한다는 것.

2. 커뮤니티가 크다는 것.

3. 많은 회사가 리액트 네이티브를 사용한다는 것. 인스타그램, 에어비앤비, 페이스북 등 ...

EX) SHOWCASE REACT NATIVE https://www.decoide.org/showcase 



참고 )https://www.youtube.com/watch?v=bXWV0obzggM&feature=youtu.be 


https://docs.expo.io/versions/latest/introduction/installation/ 

반응형

'Mobile > ReactNative' 카테고리의 다른 글

[ERROR] Unable to resolve "react-navigation" from "App.js"  (0) 2019.03.29
React build  (0) 2019.03.06
React 개발환경 구축  (0) 2019.02.25
Flutter Framework  (0) 2019.02.14
Fabric hook other service  (0) 2016.09.02



Hybrid App

개발환경

-개발 OS :  Window


1. git repo 설정

--

2. Nodejs 설치 

 10.15.1 LTS  <small>Recommended For Most Users</small>

  https://nodejs.org/en/#download


2) Install React : Using React in Visual Studio Code

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

--- node js cmd 에서 ----

1) npm install -g create-react-app

앱을 신규 생성할 경로로 이동 후

2) $ create-react-app my-app


3) my-app으로 이동후

$ npm start


Compiled successfully!

You can now view my-app in the browser.

http://localhost:3000/ Note that the development build is not optimized. To create a production build, use npm run build.



참고

http://www.devkuma.com/books/pages/1052


반응형

'Mobile > ReactNative' 카테고리의 다른 글

React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
Flutter Framework  (0) 2019.02.14
Fabric hook other service  (0) 2016.09.02
Cannot call method 'hasOwnProperty' of undefined  (0) 2016.08.23



하이브리드앱 리뉴얼 프로젝트를 맡아서 찾아보고있던 중 흥미로운 프레임워크 발견! 


공식 홈페이지

구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크이다. 언어는 구글이 개발한 Dart[2]를 사용한다. 안드로이드iOS, Web, Desktop 을 지원하며 구글의 차기 OS Fuchsia의 메인개발환경이 된다고 한다. 기존 UI를 모두 버리고 자체적으로 UI를 렌더링하기 때문에 iOS에서 material 디자인과 ripple 애니메이션[3] 을 볼 수 있고 android 에서 cupertino(ios) 디자인을 볼 수 있다. 마치 화면 전체를 2d 그래픽 api 로 fillRect 하고 drawText drawImage 해서 앱을 만드는 것처럼 플러터 엔진이 skia 기반으로 렌더링해준다. 웹개발에서 html 을 모두 무시하고 전체를 flash 나 canvas 로 만드는 것과 같다.


* 소개 ppt

https://speakerdeck.com/dsa28s/2019-gdg-android-super-dot-init-maat-pick-for-flutter?slide=57


*개념잡기 좋은 github

https://jaceshim.github.io/all-categories/#posts-list-flutter


* Flutter Facebook Group

https://www.facebook.com/groups/flutterkorea


App

https://itsallwidgets.com/

https://flutter.io/docs

반응형

'Mobile > ReactNative' 카테고리의 다른 글

React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
React 개발환경 구축  (0) 2019.02.25
Fabric hook other service  (0) 2016.09.02
Cannot call method 'hasOwnProperty' of undefined  (0) 2016.08.23

based on "webhook"

#slack

1.

#jira https://developer.atlassian.com/jiradev/jira-apis/webhooks

https://developer.atlassian.com/static/connect/docs/1.1.95/modules/common/webhook.html

#1. Register via the JIRA administration console

#2. Register via the JIRA REST API (note, the user must have the JIRA Administrators global permission)

#3. Register via an Atlassian Connect add-on (which provides a webhook registration in its descriptor) — this is described in the Connect documentation.

https://connect-inspector.atlassian.io/page/start

반응형

'Mobile > ReactNative' 카테고리의 다른 글

React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
React 개발환경 구축  (0) 2019.02.25
Flutter Framework  (0) 2019.02.14
Cannot call method 'hasOwnProperty' of undefined  (0) 2016.08.23

Cannot call method 'hasOwnProperty' of undefined

var flag = false; console.log(jsonData); console.log(requestDate); for(var key in jsonData){ console.log(key); if(key === requestDate) flag = true; } return flag;

반응형

'Mobile > ReactNative' 카테고리의 다른 글

React build  (0) 2019.03.06
React Native (1)  (0) 2019.02.26
React 개발환경 구축  (0) 2019.02.25
Flutter Framework  (0) 2019.02.14
Fabric hook other service  (0) 2016.09.02

Object [object Object] has no method 오류

참고하려는 js 메소드에 @JavascriptInterface 추가 http://theeye.pe.kr/archives/1609


TIPS) &#50504;&#46300;&#47196;&#51060;&#46300; &#53685;&#49888; 깨진글씨 구글에 검색하면 바로 한글 검색 된다. 신기....

반응형

WEBVIEW

#AndroidManifast.xml permission 지정

#java

WebSettings webSettings = mWebView.getSettings();

// 자바 스크립트 허용 webSettings.setJavaScriptEnabled(true); //webSettings.setAllowContentAccess(true); //webSettings.setAppCacheEnabled(true);

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){ mWebView.setWebContentsDebuggingEnabled(true); }

mWebView.loadUrl(baseUrl + getResources().getResourceEntryName(R.raw.appointment));

그러나! alert는 뜨지 않는다.

#경로 InputStream remoteUrl = getResources().openRawResource(R.raw.appointment); // String htmlStr = readHtml(remoteUrl); // mWebView.loadData(html, "text/html", "utf-8"); // String mimeType = "text/html"; // String encoding = "UTF-8"; String baseUrl = "file:///android_res/raw/"; WebSettings webSettings = mWebView.getSettings();

#debug

chrome remote debug

#url chrome://inspect/#devices

- device : usb debug check - 해당 페이지로 들어가면 연결된 디바이스 목록이 뜬다. - 디버깅 명령 후 웹뷰로 들어가면 해당 페이지 목록이 뜬다. - 'inspect' 클릭하면 크롬 개발자 도구 처럼 창이 뜬다. - 디버깅 가능.

#source

- 해당 소스 추가

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){ mWebView.setWebContentsDebuggingEnabled(true); }

#webview 작성시 꼭 볼것 https://developer.android.com/reference/android/webkit/WebView.html

#library마다 디자인 차이 조금 있음..

http://stackoverflow.com/questions/38053779/android-webview-how-to-change-javascript-alert-title-text-in-android-webview

반응형

'Mobile > Android' 카테고리의 다른 글

[Android] Google Play 결제 라이브러리 사용하기  (0) 2019.10.01
WebView <-> 안드로이드 통신  (0) 2016.08.20
ANDROID | Fragment LiftCycle  (0) 2016.08.17
UI | android systemUI Handle  (0) 2016.08.17
UI | round shape  (0) 2016.08.08

+ Recent posts