[React.JS] react-native link react-native-webview Unrecognized command "link" 문제 해결

리액트 네이티브를 react-native-webview로 구현할 일이 있어서 기술검토를 위해 적용했다.

 

그런데 오류가 발생하는 것이 아닌가?

 

react-native link react-native-webview

위 명령에서는 link가 사라졌기에 작동이 되지 않는 문제가 있었다.

 

음... 어찌할까 몇시간 고생하면서 찾아봤는데, 정답은 자동으로 autolinking 기능으로 필요 없어진 부분이었다.

 

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

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

1. Add react-native-webview to your dependencies

$ yarn add react-native-webview

(or)

For npm use

$ npm install --save react-native-webview

2. Link native dependencies(이 부분이 필요없어짐. pod는 해줘야 하는 게 맞다).

From react-native 0.60 autolinking will take care of the link step but don't forget to run pod install

React Native modules that include native Objective-C, Swift, Java, or Kotlin code have to be "linked" so that the compiler knows to include them in the app.

$ react-native link react-native-webview

NOTE: If you ever need to uninstall React Native WebView, run react-native unlink react-native-webview to unlink it.

iOS & macOS:

If using CocoaPods, in the ios/ or macos/ directory run:

$ pod install

While you can manually link the old way using react-native own tutorial, we find it easier to use CocoaPods. If you wish to use CocoaPods and haven't set it up yet, please instead refer to that article.

Android:(추가 반드시 필요)

Android - react-native-webview version <6: This module does not require any extra step after running the link command 🎉

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

For Android manual installation, please refer to this article where you can find detailed step on how to link any react-native project.

Windows:

Autolinking is supported for React Native Windows v0.63 and higher. If your app uses a React Native Windows version that does not have autolinking support, make the following additions to the given files manually:

windows/myapp.sln

Add the ReactNativeWebView project to your solution.

1. Open the solution in Visual Studio 2019
2. Right-click Solution icon in Solution Explorer > Add > Existing Project Select node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj

windows/myapp/myapp.vcxproj

Add a reference to ReactNativeWebView to your main application project. From Visual Studio 2019:

1. Right-click main application project > Add > Reference... Check ReactNativeWebView from Solution Projects.
2. Modify files below to add the package providers to your main application project

pch.h

Add #include "winrt/ReactNativeWebView.h".

app.cpp

Add PackageProviders().Append(winrt::ReactNativeWebView::ReactPackageProvider()); before InitializeComponent();.

Note if you want to enable scroll with Touch for the WebView component you must disable perspective for your app using ReactRootView.IsPerspectiveEnabled.