728x90
반응형

현재 회사에서 개발하고 있는 앱/컨트롤 패널에서 hdmi 선을 통해 화면을 띄울일이 있었다.

 

화면 미러링을 하면, 조작하고 있는 화면이 모두 나오기 때문에, 

 

react-native-external-display

 

라이브러리를 통해 외부 display에 연결하였다.

 

라이브러리 자체가 사용하기 편하고,

 

screen을 배엷 값으로 받기때문에, 해당 디스플레이의 키값만 넣어주면 된다

 

https://drive.google.com/file/d/1dbxzHbQktO_XZJsdxGfGg-QRBdgdZLm6/view?usp=sharing

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

'ReactNative' 카테고리의 다른 글

[ React Native ] FlatList rendering 속도 개선 / PureComponent  (0) 2023.09.15
[ React Native ] android fatal signal 11 (sigsegv) code 1 (segv_maperr) fault addr  (0) 2023.09.14
[ React Native ] patch-package 를 통한 npm 라이브러리 hotfix  (0) 2023.09.11
[ React Native ] SockJS, Stomp useSocket 훅  (0) 2023.09.11
[ React Native ] react-native-vision-camera useFrameProcessor사용시 error : frame-processor/unavailable: Frame Processors are not enabled  (0) 2023.09.07
728x90
반응형

기존 사용하고 있는 라이브러리중에, 포크를 딸만큼은 아니지만, 패키지가 수정되어야 할 부분이 존재했다.

 

android compile 이 deprecated 되고, implementation 으로 변경되었기 때문에, 간단히 patch-package 를 해주기로했다.

 

일단 package.json 에

 

postinstall : patch-package 를 적용해주었다.

 

yarn과 npm 후(post)에 실행해주는 명령어이다.

 

그뒤

 

yarn add patch-package

로 patch-package 를 세팅해준다.

 

후, 원하는 패키지의 코드를 변경해준다.

 

compile "com.facebook.react:react-native:+"

을

implementation "com.facebook.react:react-native:+"

로 변경

npx patch-package "모듈이름"

을 통해 patch파일을 생성해준다.

 

내가 수정한 모듈이름은 react-native-orientation이었다. 따라서 나는

 

npx patch-package react-native-orientation 을통해 패치파일들을 생성해주었다.

 

패치 파일이 생긴걸 확인

 

rm -rf node_modules

를 통해 node_modules를 제거하고 다시

 

yarn을 통해 깔아보면 patch가 반영되는것으로 확인 된다.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] android fatal signal 11 (sigsegv) code 1 (segv_maperr) fault addr  (0) 2023.09.14
[ React Native ] react-native-external-display 를 이용한 외부 화면 연결  (0) 2023.09.13
[ React Native ] SockJS, Stomp useSocket 훅  (0) 2023.09.11
[ React Native ] react-native-vision-camera useFrameProcessor사용시 error : frame-processor/unavailable: Frame Processors are not enabled  (0) 2023.09.07
[ React Native ] ./gradlew assmebleRelease 시 error : A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action  (0) 2023.08.31
728x90
반응형
import {Stomp} from '@stomp/stompjs';
import {useCallback, useEffect} from 'react';
import SockJS from 'sockjs-client';
import {stompClient} from '../../App';
import Config from '../config';
import showSlice from '../reudx/slices/show';
import {useAppDispatch} from '../reudx/store';
import NetInfo, {useNetInfo} from '@react-native-community/netinfo';

export const useSocket = () => {
console.log('::::::: useSocket render ::::::::');

const dispatch = useAppDispatch();

const initSocket = useCallback(() => {
console.log('::::::: init socket ::::::::');
stompClient.current = Stomp.over(function () {
return new SockJS(Config.SOCKET_URL);
});
// stompClient.client.appendMissingNULLonIncoming = true;
// stompClient.client.forceBinaryWSFrames = true;
}, []);

const disconnectHandler = useCallback(() => {
console.log('::::::: disconnectHandler :::::::');
stompClient.current.disconnect();
}, []);

const connectHandler = useCallback(() => {
console.log('::::::: connectHandler :::::::');
stompClient.current.connect(
{},
() => {
//connect
console.log('open');
dispatch(showSlice.actions.setSocketConnected(true));
},
() => {
//error
console.log('error');
dispatch(showSlice.actions.setSocketConnected(false));
},
() => {
//close
console.log('close');
dispatch(showSlice.actions.setSocketConnected(false));
},
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
let beforeState: boolean | null = true;
const unsubscribe = NetInfo.addEventListener(state => {
console.log(' ::::::::::::::::::::::::::::: ');
console.log('Connection type', state.type);
console.log('Is connected?', state.isConnected);
// dispatch(showSlice.actions.setIpAddress(state?.details?.ipAddress));

if (beforeState !== state.isConnected) {
console.log(
'network changed ::::::::::::::::::::: to ' + state.isConnected,
);

// todo 네트워크 재연결 뒤에 소켓 연결할지
// if (state.isConnected) {
// initSocket();
// connectHandler();
// }
}
beforeState = state.isConnected;
});

// Unsubscribe
return () => unsubscribe();
}, []);

useEffect(() => {
let beforeState:
| SockJS.CONNECTING
| SockJS.OPEN
| SockJS.CLOSING
| SockJS.CLOSED;

let timer = setInterval(() => {
// console.log('stompClient.current.state :::' + stompClient.current.state);
if (beforeState !== stompClient.current.state) {
console.log('changed :::::::::' + stompClient.current.state);
if (
stompClient.current.state === SockJS.OPEN ||
stompClient.current.state === SockJS.CONNECTING
) {
console.log('socket Connected::: true');
// dispatch(showSlice.actions.setSocketConnected(true));
} else {
console.log('socket Connected::: false');
// dispatch(showSlice.actions.setSocketConnected(false));
connectHandler();
}
}
beforeState = stompClient.current.state;
}, 1000);

return () => clearInterval(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return {connectHandler, disconnectHandler, initSocket};
};

 

initSocket()

후

connectHandler()

로 필요한곳에서 사용하면 된다.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] react-native-external-display 를 이용한 외부 화면 연결  (0) 2023.09.13
[ React Native ] patch-package 를 통한 npm 라이브러리 hotfix  (0) 2023.09.11
[ React Native ] react-native-vision-camera useFrameProcessor사용시 error : frame-processor/unavailable: Frame Processors are not enabled  (0) 2023.09.07
[ React Native ] ./gradlew assmebleRelease 시 error : A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action  (0) 2023.08.31
[ React Native ] ./gradlew assembleRelease error : AAPT: error: failed to read PNG signature: file does not start with PNG signature.  (0) 2023.08.31
728x90
반응형

rtmp로 영상을 전송하는 중에, 컨트롤러에서 카메라의 노출값을 조절할 일이 생겼다.

 

기존 사용하고있는 react-native-nodemediaclient

 

에는 카메라관련 세팅이 너무 미흡하기에, 

 

react-native-vision-camera 에 있는

useFrameProcessor

를 사용하여 만들기로 결정했다.

 

frame-processor/unavailable: Frame Processors are not enabled

 

일단 해당 에러는 

 

react-native-worklets-core 를 설치하고

react-native-reanimated 를 사용하면서 해결하였다.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] patch-package 를 통한 npm 라이브러리 hotfix  (0) 2023.09.11
[ React Native ] SockJS, Stomp useSocket 훅  (0) 2023.09.11
[ React Native ] ./gradlew assmebleRelease 시 error : A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action  (0) 2023.08.31
[ React Native ] ./gradlew assembleRelease error : AAPT: error: failed to read PNG signature: file does not start with PNG signature.  (0) 2023.08.31
[ React Native ] error : Could not get BatchedBridge, make sure your bundle is packaged correctly  (0) 2023.08.31
728x90
반응형

./gradlew assembleRelase 로 해당 에러가나서 검색해보니

 

./graldew app:assembleRelease 로 해결했다는 글을 찾았다.

 

해당 명령어로 빌드하니 성공.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] SockJS, Stomp useSocket 훅  (0) 2023.09.11
[ React Native ] react-native-vision-camera useFrameProcessor사용시 error : frame-processor/unavailable: Frame Processors are not enabled  (0) 2023.09.07
[ React Native ] ./gradlew assembleRelease error : AAPT: error: failed to read PNG signature: file does not start with PNG signature.  (0) 2023.08.31
[ React Native ] error : Could not get BatchedBridge, make sure your bundle is packaged correctly  (0) 2023.08.31
[ React Native ] wifi로 안드로이드 여러대 연결하기  (0) 2023.08.25
728x90
반응형

앱 아이콘 제네레이터에서 앱아이콘을 png 형태로 받아서 그냥 사용했더니

 

AAPT: error: failed to read PNG signature: file does not start with PNG signature.

 

해당 에러가 나왔다.

 

png 형태를 jpg로 강제변환해주고

 

jpg2png 사이트에서 한번도 저장하니 정상작동했다.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] react-native-vision-camera useFrameProcessor사용시 error : frame-processor/unavailable: Frame Processors are not enabled  (0) 2023.09.07
[ React Native ] ./gradlew assmebleRelease 시 error : A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action  (0) 2023.08.31
[ React Native ] error : Could not get BatchedBridge, make sure your bundle is packaged correctly  (0) 2023.08.31
[ React Native ] wifi로 안드로이드 여러대 연결하기  (0) 2023.08.25
[ React Native ] [mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`.  (0) 2023.08.24
728x90
반응형
$ react-native start --reset-cache

로 해결.

 

종종 yarn add 후 발생한다

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

'ReactNative' 카테고리의 다른 글

[ React Native ] ./gradlew assmebleRelease 시 error : A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action  (0) 2023.08.31
[ React Native ] ./gradlew assembleRelease error : AAPT: error: failed to read PNG signature: file does not start with PNG signature.  (0) 2023.08.31
[ React Native ] wifi로 안드로이드 여러대 연결하기  (0) 2023.08.25
[ React Native ] [mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`.  (0) 2023.08.24
[ React Native ] sockJS 사용 ReferenceError: Property 'TextEncoder' doesn't exist  (0) 2023.08.23
728x90
반응형

일단 기존에 2대를 연결해 놓았기때문에

 

adb kill-server

 

로 adb 를 초기화

 

adb tcpip 5555

 

입력 후 

 

adb connect 192.168.0.194:5555

adb connect 192.168.0.54:5555 

 

하면

 

adb devices

 

일때

 

연결이 완료되었다

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

'ReactNative' 카테고리의 다른 글

[ React Native ] ./gradlew assembleRelease error : AAPT: error: failed to read PNG signature: file does not start with PNG signature.  (0) 2023.08.31
[ React Native ] error : Could not get BatchedBridge, make sure your bundle is packaged correctly  (0) 2023.08.31
[ React Native ] [mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`.  (0) 2023.08.24
[ React Native ] sockJS 사용 ReferenceError: Property 'TextEncoder' doesn't exist  (0) 2023.08.23
[ React Native ] react-native-code-push hook 으로 분리  (0) 2023.08.16
728x90
반응형

mobx 를 사용하면

 

[mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`. 

 

해당 에러가 나오기 마련이다.

 

import {Observer, useObserver} from 'mobx-react-lite';
import React, {useContext} from 'react';
import {storesContext} from '../utils/context';

export const useStoreData = (context, storeSelector, dataSelector) => {
const value = useContext(context);
if (!value) {
throw new Error('No store');
}
const store = storeSelector(value);

return useObserver(() => {
return dataSelector(store);
});
};

export default dataSelector => {
return useStoreData(storesContext, contextData => contextData, dataSelector);
};

해당 부분을

 

import {Observer, useObserver} from 'mobx-react-lite';
import React, {useContext} from 'react';
import {storesContext} from '../utils/context';

export const useStoreData = (context, storeSelector, dataSelector) => {
const value = useContext(context);
if (!value) {
throw new Error('No store');
}
const store = storeSelector(value);

return (
<Observer>
{() => {
return dataSelector(store);
}}
</Observer>
);
};

export default dataSelector => {
return useStoreData(storesContext, contextData => contextData, dataSelector);
};

로 변경해주면 warning 사라짐

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

'ReactNative' 카테고리의 다른 글

[ React Native ] error : Could not get BatchedBridge, make sure your bundle is packaged correctly  (0) 2023.08.31
[ React Native ] wifi로 안드로이드 여러대 연결하기  (0) 2023.08.25
[ React Native ] sockJS 사용 ReferenceError: Property 'TextEncoder' doesn't exist  (0) 2023.08.23
[ React Native ] react-native-code-push hook 으로 분리  (0) 2023.08.16
[ React Native ] Apple Oauth login error : com.apple.AuthenticationServices.Authorization Error Code 1000  (0) 2023.08.16
728x90
반응형
@stomp/stompjs
sockjs-client

해당 라이브러리들을 yarn 을통해 받아주고

const connectHaner = () => {
const sock = new SockJS('http://192.168.0.77:8080/wowplanet');

const stompClient = Stomp.over(sock);

stompClient.connect(
{},
() => {
console.log('complete');
stompClient.subscribe('/topic/public', payload => {
console.log(payload.body);
});
},
// ,
() => {
console.log('error');
},
);
};

해당 코드로 connect를 시도했는데

 WARN  Possible Unhandled Promise Rejection (id: 1):

ReferenceError: Property 'TextEncoder' doesn't exist

ReferenceError: Property 'TextEncoder' doesn't exist

 

에러가 나왔다

 

TextEncoder 라이브러리를 설정해주기위해

 

root 에

globals.js 를 만들어주고

 

해당 파일에

global.TextEncoder = require('text-encoding').TextEncoder;

설정뒤

 

index.js 에서

 

import './globals.js';

를 해주니 정상 작동했다.

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

'ReactNative' 카테고리의 다른 글

[ React Native ] wifi로 안드로이드 여러대 연결하기  (0) 2023.08.25
[ React Native ] [mobx-react-lite] 'useObserver(fn)' is deprecated. Use `<Observer>{fn}</Observer>` instead, or wrap the entire component in `observer`.  (0) 2023.08.24
[ React Native ] react-native-code-push hook 으로 분리  (0) 2023.08.16
[ React Native ] Apple Oauth login error : com.apple.AuthenticationServices.Authorization Error Code 1000  (0) 2023.08.16
[ React Native ] Firebase ios error :: The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules.  (0) 2023.08.11

+ Recent posts

티스토리툴바