파일 시스템 사용 react-native-fs

! 중요 

리액트 네이티브 버전 < 0.57 이거나 또는  Gradle 버전이 < 3 이면   
react-native-fs at version @2.11.17! 으로 꼭 설치

리액트 네이티브 버전 >= 0.57 이거나 또는  Gradle >= 3 이면
react-native-fs at version >= @2.13.2! 으로 꼭 설치

리액트 네이티브 버전 >= 0.61 이면
react-native-fs at version >= @2.16.0! 으로 설치

 

1. 환경설정

1-1. IOS

- 설치 명령

npm install react-native-fs --save

 

 

주의: 리액트 네이티브 버전이  < 0.40 아래와 같이 설치
npm install react-native-fs@2.0.1-rc.2 --save

package.json파일에서는  아래와 같이 표시되어야 함
"react-native-fs": "2.0.1-rc.2" (물결 표시 없이)

 

방법 1:

react-native link로 자동 설치, 따로 추가 해줄거는 없음 
react-native link react-native-fs

 

방법 2: 

CocoaPods 설치 (나는 이방법 선택)

프로젝트 Podfile에 RNFS pod  추가, 
pod 'RNFS', :path => '../node_modules/react-native-fs'

pod 설치 명령
pod install

 

방법 3:

xcode로 수동설치

XCode에서, 프로젝트 navigator에서 오른쪽 클릭 Libraries ➜ Add Files to [본인 프로젝트 이름] 

node_modules로 간다음  ➜ react-native-fs 와 .xcodeproj file 추가

XCode에서, 프로젝트 navigator에서, 본인 project 선택.  RNFS project에 lib*.a 추가

본인 project's Build Phases ➜ Link Binary With Libraries. 클릭

before in the project navigator와  Build Settings tab 가기 전에,
.xcodeproj file를 추가한다.

'All' ('Basic' 대신에) 되어 있는지 확인. Header Search Paths  찾고  $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React  둘다 포함되어 있는지 확인한다. 

본인 project (Cmd+R)  실행

 

1-2. Android

현재  DocumentDirectory로 제한되어 있다.  지도 어플 files directory 대안으로

아래 파일을 사용한다.

// android/settings.gradle

...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')

 

// android/app/build.gradle

...
dependencies {
    ...
    implementation project(':react-native-fs')
}

// register module (in MainActivity.java)

For react-native below 0.19.0 (use cat ./node_modules/react-native/package.json | grep version)

import com.rnfs.RNFSPackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ......

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new RNFSPackage())      // <------- add package
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}


// For react-native 0.19.0 and higher

import com.rnfs.RNFSPackage; // <------- add package

public class MainActivity extends ReactActivity {
   // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(), // <---- add comma
        new RNFSPackage() // <---------- add package
      );
    }


// For react-native 0.29.0 and higher ( in MainApplication.java )

import com.rnfs.RNFSPackage; // <------- add package

public class MainApplication extends Application implements ReactApplication {
   // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(), // <---- add comma
        new RNFSPackage() // <---------- add package
      );
    }

 

2. 디렉토리 사용방법 주의사항

MainBundlePath: 메인 번들 폴더(Main Bundle Directory)의 절대 위치(안드로이드에서는 사용이 불가.)

CachesDirectoryPath: 캐시 폴더(Cache Directory)의 절대 위치

ExternalCachesDirectoryPath: 외부 캐시 폴더(External Cache Directory)의 절대 위치.(iOS에서는 사용이 불가.)

DocumentDirectoryPath: 도큐먼트 폴더(Document Directory)의 절대 위치.

TemporaryDirectoryPath: 임시 폴더(Temporary Directory)의 절대 위치.(안드로이드는 캐시 폴더가 전달.)

LibraryDirectoryPath: iOS의 NSLibraryDirectory의 절대 위치.(안드로이드에서는 사용이 불가.)

ExternalDirectoryPath: 외부 파일 공유 폴더(External files, shared directory)의 절대 위치.(iOS에서는 사용이 불가능.)

ExternalStorageDirectoryPath: 외부 저장소 공유 폴더(External storage, shared directory)의 절대 위치.(iOS에서는 사용이 불가.)