react-native-webviewの導入でつまづいたとこ

react-nativeのWebViewが使えなくなるらしいので、代わりにreact-native-webviewを使えということなので
react-native-webviewのWebViewを使おうとして詰まってしまったので解決策を個人的な備忘録で載せときます。

バージョン

・Windows10 ・Node.js 11.9.0 ・Android Studio 3.3 ・react-native-cli 2.0.1 ・react-native-webview 5.0.5

エラー内容

react-native-webviewを手順通りにインストールして、対象のプロジェクトをコンパイルしようとすると コンパイルエラーが発生。 setting.gradleが何やら問題があるらしい。

下記にエラーログ抜粋

FAILURE: Build failed with an exception.

* Where:
Settings file 'C:¥Users¥(ユーザ名)¥Desktop¥dev¥(プロジェクト名)¥android¥settings.gradle' line: 3

* What went wrong:
Could not compile settings file 'C:¥Users¥(ユーザ名)¥Desktop¥dev¥(プロジェクト名)¥android¥settings.gradle'.
> startup failed:
  settings file 'C:¥Users¥(ユーザ名)¥Desktop¥dev¥(プロジェクト名)¥android¥settings.gradle': 3: unexpected char: '¥' @ line 3, column 117.
     e_modules¥react-native-webview¥android')

エラー原因

問題のsetting.gradleの中身

setting.gradle

rootProject.name = 'web'
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '..¥node_modules¥react-native-webview¥android')

include ':app'

エラー原因はログに出力されている通りに「¥」が原因でした。
開くエディタによっては「¥」が自動で/に置き換わってたので質が悪い。

解決策

「¥」を「/」に置き換えてあげる。

感想

Visual Studio Codeで開くと「¥」が「/」に置き換わって表示されていた。 サクラエディタで開くと「¥」のまま出力されていた。 解決するのに結構時間かかりました。ご注意を。 あとほかの解決策知ってる人は教えてください。