react-native反应原生入门


备注

React Native允许您仅使用JavaScript构建移动应用程序。它使用与React相同的设计,允许您从声明性组件组成丰富的移动UI。

使用React Native,您不会构建“移动Web应用程序”,“HTML5应用程序”或“混合应用程序”。您构建了一个真正的移动应用程序,它与使用Objective-C或Java构建的应用程序无法区分。 React Native使用与常规iOS和Android应用程序相同的基本UI构建块。您只需使用JavaScript和React将这些构建块放在一起。

它是开源的,由Facebook维护。

资料来源: React Native网站

Linux安装程序(Ubuntu)

1)设置Node.JS

启动终端并运行以下命令以安装nodeJS:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs
 

如果node命令不可用

sudo ln -s /usr/bin/nodejs /usr/bin/node
 

替代方案NodeJS instalations:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
 

要么

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs
 

检查您是否拥有当前版本

node -v 
 

运行npm以安装react-native

sudo npm install -g react-native-cli
 

2)设置Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk
 

3)设置Android Studio:

Android SDK或Android Studio

http://developer.android.com/sdk/index.html
 

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
 

4)安装模拟器:

在终端上运行命令

android
 

从SDK Manager中选择“SDK平台”,您会看到“Android 7.0(Nougat)”旁边的蓝色复选标记。如果不是,请单击复选框,然后单击“应用”。

在此处输入图像描述

5)开始一个项目

示例app init

react-native init ReactNativeDemo && cd ReactNativeDemo
 

Obs:总是检查android/app/build.gradle 上的版本是否与Android SDK上下载的Build Tools相同

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...
 

6)运行项目

打开Android AVD来设置虚拟机器人。执行命令行:

android avd
 

按照说明创建虚拟设备并启动它

打开另一个终端并运行命令行:

react-native run-android
react-native start
 

Mac的安装程序

安装包管理器Homebrew brew

将其粘贴到终端提示符处。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 

安装Xcode IDE

使用下面的链接下载或在Mac App Store中找到它

https://developer.apple.com/download/

注意:如果您安装了Xcode-beta.app以及Xcode.app的生产版本, 确保您使用的是xcodebuild 工具的生产版本。你可以用:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

安装Android环境

  • Git git

    *如果您已安装XCode,则已安装Git,否则请运行以下命令

    brew install git 
     
  • 最新的JDK

  • Android Studio

    选择自定义安装

    选择自定义安装

    选择性能和Android虚拟设备

    选择性能和Android虚拟设备

    安装完成后,从Android Studio欢迎窗口中选择Configure - > SDK Manager。

    选择Configure  - > SDK Manager

    在SDK平台窗口中,选择显示包详细信息,然后在Android 6.0(Marshmallow)下,确保选中Google API,Intel x86 Atom System Image,Intel x86 Atom_64系统映像和Google API Intel x86 Atom_64系统映像。

    SDK平台窗口

    在SDK Tools窗口中,选择Show Package Details,在Android SDK Build Tools下,确保选中Android SDK Build-Tools 23.0.1。

    SDK工具窗口

  • 环境变量ANDROID_HOME

    确保ANDROID_HOME环境变量指向您现有的Android SDK。为此,将其添加到〜/ .bashrc,〜/ .bash_profile(或shell使用的任何内容)并重新打开终端:

    如果您在没有Android Studio的情况下安装了SDK,那么它可能类似于:/ usr / local / opt / android-sdk

    export ANDROID_HOME=~/Library/Android/sdk
     

Mac的依赖关系

你需要Xcode for iOS和Android Studio for android,node.js,React Native命令行工具和Watchman。

我们建议通过Homebrew安装node和watchman。

brew install node
brew install watchman
 

Watchman是Facebook用于观察文件系统变化的工具。强烈建议您安装它以获得更好的性能。这是可选的。

Node附带npm,允许您安装React Native命令行界面。

npm install -g react-native-cli
 

如果您收到权限错误,请尝试使用sudo:

sudo npm install -g react-native-cli.
 

对于iOS,安装Xcode的最简单方法是通过Mac App Store。并为Android下载并安装Android Studio。

如果您打算在Java代码中进行更改,我们建议使用Gradle Daemon加速构建。

测试React Native安装

使用React Native命令行工具生成名为“AwesomeProject”的新React Native项目,然后在新创建的文件夹中运行react-native run-ios。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
 

您很快就会看到您的新应用在iOS模拟器中运行。 react-native run-ios只是运行应用程序的一种方式 - 您也可以直接从Xcode或Nuclide中运行它。

修改您的应用

现在您已经成功运行了应用程序,让我们对其进行修改。

  • 在您选择的文本编辑器中打开index.ios.js或index.android.js并编辑一些行。
  • 在iOS模拟器中点击Command⌘+ R重新加载应用程序并查看更改!而已!

恭喜!您已成功运行并修改了第一个React Native应用程序。

来源: 入门 - React-Native

Windows安装程序

注意:您无法在Windows上为iOS开发react-native应用程序,只能在本机安卓应用程序中进行反应。

可以在此处找到 Windows上的react-native官方设置文档。如果您需要更多详细信息,请在此处提供详细指南

工具/环境

  • Windows 10
  • 命令行工具(例如Powershell或Windows命令行)
  • Chocolatey通过PowerShell设置的步骤
  • JDK(版本8)
  • Android Studio
  • 为HAXM启用虚拟化技术的Intel计算机(可选,仅在您要使用模拟器时才需要)

1)设置您的机器以进行本机开发

以管理员身份启动命令行运行以下命令:

choco install nodejs.install
choco install python2
 

以管理员身份重新启动命令行,以便运行npm

npm install -g react-native-cli
 

运行最后一个命令后,复制安装了react-native的目录。步骤4中需要这个。我在两台计算机上尝试过这种情况,例如: C:\Program Files (x86)\Nodist\v-x64\6.2.2 。在另一个是: C:\Users\admin\AppData\Roaming\npm

2)设置环境变量

有关图像的分步指南可在此处找到。

通过导航到以下命令打开“环境变量”窗口:

[右键单击]“开始”菜单 - >系统 - >高级系统设置 - >环境变量

在底部找到“Path”系统变量,并在步骤1中添加react-native的安装位置。

如果您还没有添加ANDROID_HOME环境变量,那么您也必须在此处执行此操作。仍然在“环境变量”窗口中,添加一个名为“ANDROID_HOME”的新系统变量,并将值作为android sdk的路径。

然后以管理员身份重新启动命令行,以便在其中运行react-native命令。

3)创建项目在命令行中,导航到要放置项目的文件夹并运行以下命令:

react-native init ProjectName
 

4)运行项目从android studio启动模拟器在命令行中导航到项目的根目录并运行它:

cd ProjectName
react-native run-android
 

您可能会遇到依赖性问题。例如,可能存在错误,即您没有正确的构建工具版本。要解决此问题,您必须在Android Studio中打开sdk管理器并从那里下载构建工具。

恭喜!

要刷新ui,您可以在模拟器中运行应用程序两次按r 键。要查看开发人员选项,您可以按ctrl + m