우분투 20.04 리액트 네이티브 셋팅

https://reactnative.dev/docs/environment-setup

 

 

Installing pip for Python 3

To install pip for Python 3 on Ubuntu 20.04 run the following commands as root or sudo user in your terminal:

 

sudo apt update

sudo apt install python3-pip

 

The command above will also install all the dependencies required for building Python modules.

When the installation is complete, verify the installation by checking the pip version:

pip3 --version

The version number may vary, but it will look something like this:

pip 20.0.2 from /usr/lib/python3/dist-packages/pip (python 3.8)

 

1. node.js 가상환경 만들기

 

virtualenv (python 가상환경)

pip install virtualenv

python3 -m virtualenv venv --python=python3.8

source bin/activate 바이너리 파일을 실행해준다.

 

고러면

 

파이썬 가상환경이 실행된다.

 

1. node.js 가상환경 만들기

 

가상환경 내에서 nodeenv를 설치한다.

 

pip install nodeenv 

 

nodeenv 파이썬 패키지를 이용하여 node 가상환경을 만든다. 

 

nodeenv test --node=14.17.3

 

test 폴더로 들어가

 

source bin/activate를 실행하다.

 

그리고 yarn을 설치한다.

 

npm install --global yarn

 

1. openJDK 설치

openJDK를 웹에서 설치하자. OpenJDK 

 

파일이름은 ~.tar.gz 이다.

 

원하는 폴더에서 (가상환경 안에 만들면 좋다)쉘을 열고 tar -xvf ~.tar.gz를 사용하자

 

그러면 압축이 풀린다.

 

설치후 환경변수를 설정해야 한다. 

 

설치는 ~/openJDK 폴더를 만들어 안에 설치하자

 

vi ~/.bashrc에 

 

export JAVA_HOME=$HOME/openJDK 

 

를 추가하고 저장한다.(ESC-> : -> wq -> ENTER )

1. 안드로이드 스트디오 설치Android development environment

 

Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. Install Android Studio

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device

Then, click "Next" to install all of these components.

If the checkboxes are grayed out, you will have a chance to install these components later on.

Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 10 (Q) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:

• Android SDK Platform 29
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 29.0.2 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config file:

export ANDROID_HOME=$HOME/Android/Sdk

export PATH=$PATH:$ANDROID_HOME/emulato

export PATH=$PATH:$ANDROID_HOME/too

export PATH=$PATH:$ANDROID_HOME/tools/b

export PATH=$PATH:$ANDROID_HOME/platform-too

 

.bash_profile is specific to bash. If you're using another shell, you will need to edit the appropriate shell-specific config file.

Type source $HOME/.bash_profile for bash or source $HOME/.zprofile to load the config into your current shell. Verify that ANDROID_HOME has been set by running echo $ANDROID_HOME and the appropriate directories have been added to your path by running echo $PATH.

Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.

 

1. AVD설치

그래픽 카드 문제가 있으면 실행 환경을 소프트웨어로 설정해 시작하자. 

만약 플레이 스토어 마크가 있는 것을 선택하면 변경이 불가능할 수도 있다. 

그러니 없는 것을 선택하자.

1. alias 설정

우분투에서 다양한 명령줄 인터프리터를 치환할 수 있는 명령어를 의미한다.

 

즉, 자주 사용하는 명령어를 별명(alias)을 사용하여 치환하는 것을 의미한다. 

 

1. 먼저 Command 창에서 alias를 입력한다.

$ alias

사용자에 따라 현재 사용되고 있는 alias를 볼수 있다.

 

2. gedit을 이용하여 ~/.bashrc에서 추가한다.

 

$ gedit ~/.bashrc

* vim이나 다른 에디터를 사용해도 된다.

 

예시) command 창에서 abc를 입력하면, cd ~/heejin/pytorch 명령어가 실행된다.

명령어의 내용은 heejin폴더 밑에 pytorch 파일로 들어가는 것을 의미한다.

alias abc='cd ~/heejin/pytorch'

3. 설정이 완료되면, 저장하고 명령어 창에 source ~/.bashrc를 입력한다.

 

source ~/.bashrc

 

4. 명령어 창에 alias를 쳐보면 추가된 것을 알수있다.

 

(주의할 사항)

 

1. ~/.bashrc에 입력할 때, alias 변수 뒤에 =과 '사이에 띄어쓰기를 하지 말아야한다.

2. ~/.bashrc에 추가하고 나서, 꼭꼭 source ~/.bashrc 명령어 or reboot을 통해 활성화할것!  

7. 시작

 startㅇㅁㅇㅁ

npx react-native init AwesomeProject

yarn react-native start

터미널을 새로열고 시작.

sudo chown kms /dev/kvm && yarn react-native run-android

 

https://arvrjourney.com/building-cross-platform-ar-apps-with-react-native-384d997da56a

yarn add react-native-gesture-handler@1.3.0

https://reactnavigation.org/docs/4.x/getting-started

https://reactnavigation.org/docs/4.x/getting-started/

https://github.com/software-mansion/react-native-gesture-handler/issues/676

null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction') · Issue #676 · software-mansion/react-native-ge

https://stackoverflow.com/questions/46878638/how-to-clear-react-native-cache

v-1.13.1 reamin~1 문제 있으면 캐쉬 지워

How to clear react-native cache?

 

 

How to clear react-native cache?

 

 

react native reanimated Android only -> E/ReactNativeJS: undefined is not an object (evaluating '_ReanimatedModule.default.configureProps')

 

https://lifesaver.codes/answer/android-only-e-reactnativejs-undefined-is-not-an-object-(evaluating-reanimatedmodule-default-configureprops-) 

[Solved]react native reanimated Android only -> E/ReactNativeJS: undefined is not an object (evaluating '_ReanimatedModule.defau