ReactNative 入门体验

环境

macOS Mojave Version 10.14.3
Xcode 10.1
iPhone 5s 10.0.1
node v11.10.0
npm 6.7.0
React Native 0.58
react 16.6.3

新建ReactNative项目

brew install node
brew install watchman

安装React Native命令行工具

npm install -g react-native-cli

安装Xcode及命令行相关工具

或者

## man xcode-select
## xcode-select - Manages the active developer directory for Xcode and BSD
##       tools.
## --install
##              Opens a user interface dialog to request automatic  installation
##              of the command line developer tools.
xcode-select --install

详情参考英文-doc 链接2/中文-doc 链接11

创建新应用

命令行

react-native init AwesomeProject

WebStorm

若node版本过低可能出现Command yarn add react-native --exact` failed.,可参考Upgrade Node.js to the latest version on Mac OS升级node

观察日志的输出生成工程执行的是

/Users/`userName`/.nvm/versions/node/v11.10.0/bin/node /Users/`userName`/.nvm/versions/node/v11.10.0/lib/node_modules/react-native-cli/index.js init AwesomeProject

查看react-native位置

which react-native
## 输出
/Users/`userName`/.nvm/versions/node/v11.10.0/bin/react-native

运行React Native应用

同样根据窗口日志的输出,iOS运行的方法可以用命令行或直接使用Xcode打开运行

使用命令行方式

## cd到工程目录下
cd /Users/`userName`/WebstormProjects/AwesomeProject
## 执行
react-native run-ios

Found Xcode project AwesomeProject.xcodeproj
... bla bla bla
> Running script 'Install Third Party'

启动模拟器,然后安装下载第三方的组件,下载的脚本是scripts/ios-install-third-party.sh

if [ -d "$HOME/.rncache" ]; then
  cachedir="$HOME/.rncache" # react-native 0.57.8 and older
else
  cachedir="$HOME/Library/Caches/com.facebook.ReactNativeBuild"
fi
mkdir -p "$cachedir"
...

缓存目录旧版在家目录的.rncache,如果存在该目录,则下载的库就会安装在此处,若网络原因无法下载,可参考iOS RN 0.45以上版本所需的第三方编译库(boost等),手动下载即可

但是,运行失败了

Installing build/Build/Products/Debug-iphonesimulator/AwesomeProject.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
Failed to install the requested application
The bundle identifier of the application could not be determined.
Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist


Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/AwesomeProject.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

    at checkExecSyncError (child_process.js:637:11)
    at Object.execFileSync (child_process.js:655:13)
    at Promise.then (/Users/Jason/WebstormProjects/AwesomeProject/node_modules/react-native/local-cli/runIOS/runIOS.js:208:5)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)

再往上看,编译时就已经失败了

❌  /Users/Jason/WebstormProjects/AwesomeProject/node_modules/react-native/third-party/folly-2018.10.22.00/folly/detail/RangeCommon.h:22:10: 'glog/logging.h' file not found

#include <glog/logging.h>
       ^

用Xcode 的方式试试

选择模拟器并编译

除了jsi中RangeCommon.h的glog/logging.h找不到以外,这个与使用命令行运行时是一样,又多了三个错误,剩下的3个错误,参考Supporting Xcode 10 and the new Xcode build system,RN的一个issue,调整工程的编译系统,再次编译

现在错误变成一样了,都是文件找不到,来看看为什么找不到,React.xcodeproj > ThirdParty > glog > glog下,确实缺少文件

jsi依赖于double-conversion
double-conversion执行了ios-install-third-party.sh,并未能成功输出需要的头文件

## ios-install-third-party.sh
function fetch_and_unpack () {
    file=$1
    url=$2
    hash=$3
    cmd=$4
    ...
    if [ "$fetched" = "yes" ] || [ ! -f "third-party/$dir/.installed" ]; then
        (cd third-party;
        ## <2>
         rm -rf "$dir"
         echo Unpacking "$cachedir/$file"...
         if ! tar zxf "$cachedir/$file"; then
             file_fail "$cachedir/$file" "Unpacking '$cachedir/$file' failed"
         fi
         cd "$dir"
         eval "${cmd:-true}" && touch .installed)
    fi
}


## <1>
mkdir -p third-party

SCRIPTDIR=$(dirname "$0")

fetch_and_unpack glog-0.3.5.tar.gz https://github.com/google/glog/archive/v0.3.5.tar.gz 61067502c5f9769d111ea1ee3f74e6ddf0a5f9cc "\"$SCRIPTDIR/ios-configure-glog.sh\""

...

cd到third-party目录,将缓存目录下的包解压缩,并执行对应的指令,比如glog-0.3.5就执行

$SCRIPTDIR/ios-configure-glog.sh

### ios-configure-glog.sh

./configure --host arm-apple-darwin

# Fix build for tvOS
cat << EOF >> src/config.h
...
# Prepare exported header include
EXPORTED_INCLUDE_DIR="exported/glog"
mkdir -p exported/glog
cp -f src/glog/log_severity.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/raw_logging.h "$EXPORTED_INCLUDE_DIR/"
cp -f src/glog/stl_logging.h "$EXPORTED_INCL