728x90
반응형

react native 로 aa를 할때, 모든 개발이 그렇듯, 공통 모듈을 분리해놓는 것이 좋다.

 

rn은 크로스플랫폼 개발이라서, ios 노치 디자인 등 신경써야 할 것들이 많다.

 

대부분의 개발자분들이 그렇듯, app.tsx app.js에 앱 전반에 영향을 미치는 부분들을 생각해서 기본구조를 짤것이다.

 

예시를 들어보면

 

<BackgroundTask>
<ReRenderProvider>
<ThemeProvider>
<LanguageProvider>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<NavigationContainer ref={navigationRef}>
<Stack.Navigator

등으로 app.tx app.js를 구성하는 경우가 있었다.

 

앱의 foreground / background 상태를 체크하기 위한 BackgroundTask

강제 랜더링을 위한 ReRenderProvider

앱의 테마를 위한 ThemeProvider

언어 다국어 처리를 위한 LanguageProvider

local 저장소인 store를 위한 Provider및 PersistGate

그 안에 네비게이션 컨테이너를 넣어준다.

 

기획과 스토리 보드에 따라

SafeAreaProvider

나

ErrorBoundary

도 적용하는 것이 좋다.

 

앱에서 주로쓰는 firebase noti 들과, 코드푸쉬는 주로 index.js에서 사용했다.

728x90
반응형
저작자표시 비영리 변경금지

'ReactNative' 카테고리의 다른 글

[ React Native ] Mobx로 상태 관리하기  (1) 2023.06.03
[ React Native ] typescript template 으로 프로젝트 만들기  (0) 2023.05.30
[ React Natvive ] dispatch util 함수에서 불러서 사용  (0) 2023.05.26
[ React Native ] WebView 에서 webView안의 event감지 하는 법  (0) 2023.05.17
[ React Native ] Error: spawn ./gradlew EACCES at ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (node:internal/child_process:483:16) at process.processTicksAndRejections (node:internal/process/task_queues:82:21)  (0) 2023.05.16
728x90
반응형

요새 안드로이드로 webview안에서 event를 감지하는 것을 적용하다가, 예전에 React Native 를 이용해서 는 어떻게 해놓았었는지 문득 궁금해서 소스 코드를 찾아보았다

 

const onWebViewMessage = NativeEvent => {
if (
!util.is_empty(NativeEvent?.nativeEvent?.data) &&
JSON.parse(NativeEvent.nativeEvent.data).hasOwnProperty('type') &&
JSON.parse(NativeEvent.nativeEvent.data).type === 'exit'
) {
console.log(
'NativeEvent.nativeEvent.data',
JSON.parse(NativeEvent.nativeEvent.data).type,
);
exitFromWeb();
}
if (
!util.is_empty(NativeEvent?.nativeEvent?.data) &&
JSON.parse(NativeEvent.nativeEvent.data).hasOwnProperty('language')
) {
// changedLangFromWeb(JSON.parse(NativeEvent.nativeEvent.data).language);
}
};
const onWebViewError = e => {
util.spineer_hide();
console.log('WebView error: ', e);
};

해당 함수들을

{visible && (
<WebView
onLoadEnd={onWebViewEndLoading}
onMessage={onWebViewMessage}
onError={onWebViewError}
ref={webViewRef}
source={{uri: route.params.my_url}}

/>
)}

안에 등록 해놓었다.

728x90
반응형
저작자표시 비영리 변경금지

'ReactNative' 카테고리의 다른 글

[ React Native ] Mobx로 상태 관리하기  (1) 2023.06.03
[ React Native ] typescript template 으로 프로젝트 만들기  (0) 2023.05.30
[ React Natvive ] dispatch util 함수에서 불러서 사용  (0) 2023.05.26
[ React Native ] app.tsx app.js 기본 구조  (0) 2023.05.23
[ React Native ] Error: spawn ./gradlew EACCES at ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (node:internal/child_process:483:16) at process.processTicksAndRejections (node:internal/process/task_queues:82:21)  (0) 2023.05.16
728x90
반응형

오랜만에 RN 수정사항이 들어와서 프로젝트를 clone 하고 yarn 으로 모듈을 설치 한후 

 

yarn android 로 사뿐히 앱을 실행해보니

 

에러가 나왔다.

접근권한때문에 나오는 에러기때문에

 

 chmod 755 android/gradlew

명령어를 clone받은 프로젝트 루트에서 한번 입력해주고 다시 yarn android로 프로젝트 실행!

728x90
반응형

'ReactNative' 카테고리의 다른 글

[ React Native ] Mobx로 상태 관리하기  (1) 2023.06.03
[ React Native ] typescript template 으로 프로젝트 만들기  (0) 2023.05.30
[ React Natvive ] dispatch util 함수에서 불러서 사용  (0) 2023.05.26
[ React Native ] app.tsx app.js 기본 구조  (0) 2023.05.23
[ React Native ] WebView 에서 webView안의 event감지 하는 법  (0) 2023.05.17

+ Recent posts

티스토리툴바