react natvie學習與實踐（1）基礎配置

環境搭建

按照官網的中文指引文檔即可
搭建開發環境

工程構建

使用react-native init 命令來創建一個RN工程，如下所示

# 工程目錄名是駝峯命名規則
react-native ini helloRN

成功創建後有如下提示，運行應用（推薦使用VS code來打工工程）

Run instructions for iOS:
    • cd /Users/luogw/temp/helloRN && react-native run-ios
    - or -
    • Open ios/helloRN.xcodeproj in Xcode
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /Users/luogw/temp/helloRN && react-native run-android

基礎CLI命令

管理依賴

 # 重新安裝node_modules
npm install
# 添加依賴 react-native-vector-icons
npm install react-native-vector-icons
# 移除依賴庫（如果做了link的依賴，行移除前，先進行unlink，然後才能進行移除操作
npm uninstall react-native-vector-icons 
# 鏈接所有可以自動鏈接的依賴庫
react-native link
# 鏈接某個依賴 如 react-native-vector-icons
react-native link react-native-vector-icons
# 斷開鏈接單個依賴:react-native-vector-icons
react-native unlink react-native-vector-icons
# 移除 node_modules
rm -rf node_modules

應用打包

react-native命令

luogw@luogw-mbp studyRN$ react-native --help
Usage: react-native [options] [command]

Options:
  --version                          Print CLI version
  --projectRoot [string]             Path to the root of the project
  --reactNativePath [string]         Path to React Native
  --verbose                          Increase logging verbosity
  -h, --help                         output usage information

Commands:
  start [options]                    starts the webserver
  run-ios [options]                  builds your app and starts it on iOS simulator
  run-android [options]              builds your app and starts it on a connected Android emulator or device
  new-library [options]              generates a native library bridge
  bundle [options]                   builds the javascript bundle for offline use
  ram-bundle [options]               builds javascript as a "Random Access Module" bundle for offline use
  eject [options]                    Re-create the iOS and Android folders and native code
  link [options] [packageName]       scope link command to certain platforms (comma-separated)
  unlink [options] <packageName>     unlink native dependency
  install [options] <packageName>    install and link native dependencies
  uninstall [options] <packageName>  uninstall and unlink native dependencies
  upgrade [options] [version]        Upgrade your app's template files to the specified or latest npm version using `rn-diff-purge` project. Only valid semver versions are allowed.
  log-android [options]              starts adb logcat
  log-ios [options]                  starts iOS device syslog tail
  dependencies [options]             lists dependencies
  info [options]                     Get relevant version info about OS, toolchain and libraries
  init [options]

調試技巧

官網開發調試指引

引入第三方庫

引入第二方庫，有些是庫是需要引入本地資源的，需要react-native link相關的資源
如引入react-native-elements庫時