搭建 React Native 项目

  • Jul, 05 2019
  • React

搭建 React Native 项目

注:windows 下只可以进行 Android 开发,IOS 只能在 macos 下进行开发,所以以下教程针对 windows 下的 Android 开发

安装依赖

必须安装的依赖:Node,React Native 命令行工具,Python2,还有 JDK 和 Android SDK。

IDE 建议使用 IntelliJ IDEA 开发原生组件,vscode 开发 React 相关的 ts 组件(也可以用 IDEA 来写 ts,随个人习惯)。

Nodejs 下载地址:https://npm.taobao.org/mirrors/node/v10.15.3/node-v10.15.3-x64.msi

Python2.7 下载地址:https://www.python.org/ftp/python/2.7.15/python-2.7.15.amd64.msi

JDK:https://download.oracle.com/otn-pub/java/jdk/12.0.1+12/69cfe15208a647278a19ef0990eea691/jdk-12.0.1_windows-x64_bin.exe

IDEA 下载地址:https://download.jetbrains.com/idea/ideaIU-2019.1.2.exe

React Native 命令行工具需要使用 npm 或者 yarn 安装,建议使用 yarn 来安装,具体命令:

# 由于Facebook有些镜像被墙,可以设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
​
# 全局安装yarn和React Native命令行工具(react-native-cli)
npm install -g yarn react-native-cli
​
# 设置yarn淘宝镜像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
​
# 接下来就可以用yarn替代npm了,例如:
# yarn add @ant-design/react-native

Android 开发环境搭建

  1. 打开安装好的 IDEA,注册码可以到这里获取。

  2. 点击 Configure,点击 Settings,打开 Settings 界面

  3. 搜索框中输入Android SDK,选择你的 Android SDK,如果还没有安装 Android SDK,可以选择一个版本进行下载安装。

  4. 切换到SDK Tools,选择Android SDK Tools,然后安装,最后点击右下角的Apply按钮

  5. 现在,我们需要配置JAVA_HOMEANDROID_HOME 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为JAVA_HOME的环境变量(系统或用户变量均可),指向你的 JDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

SDK 默认是安装在下面的目录:

  c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 IDEA 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & BehaviorSystem SettingsAndroid SDK。 你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

  1. 接下来把 jdk 的 bin 目录和 platform-tools 目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 jdk 的 bin 目录和 platform-tools 目录路径添加进去。

jdk 的 bin 目录的默认路径为:

C:\Program Files\Java\jdk-12\bin

platform-tools 目录的默认路径为:

c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

IOS 开发环境搭建

由于我是使用 windows 的,所以本部分文档请参考https://reactnative.cn/docs/getting-started.html#xcode

创建项目

使用 React Native 命令行工具来创建一个基于 typescript 开发环境的名为"myapp"的新项目:

react-native init myapp --template typescript

准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。

我们目前使用 Android 真机来进行开发,需要我们的 Android 设备连接到电脑,然后打开 USB 调试。

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行react-native run-android

cd myapp
react-native run-android

如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。

注意:手机可能会弹出正在通过USB向手机安装myapp,是否允许?弹窗,请选择允许

注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。

出现下图界面,表示我们的 React Native 项目已经运行成功。

使用 IDEA 运行 React Native 应用

使用 IDEA 打开我们的myapp文件夹,点击图下箭头所示的Add Configuration...按钮

打开 Run/Debug Configurations 界面,点击+按钮,选择下面列表中的React Native

在 Name 中可以输入这个运行配置的名称,然后点击右下角的Apply按钮,就完成了。

接下来就可以点击这个绿色的小三角运行 React Navite 应用了。

集成 redux、react-router-native 到 React Native 应用中

安装依赖

yarn add redux react-redux react-router-native connected-react-router @types/react-redux @types/react-router-native @types/redux

改造 App.tsx

...
// 引入
import { Provider } from 'react-redux'
import { ConnectedRouter, connectRouter } from 'connected-react-router'
import { combineReducers, createStore } from 'redux'
import { createMemoryHistory } from 'history'
import {  Route, Link, Switch } from 'react-router-native'// 你自己的reducer
import reducers from './src/reducers'// 声明history,rootReducer,store
export const reduxHistory = createMemoryHistory()
const rootReducer = combineReducers({
    router: connectRouter(reduxHistory),
  ...reducers
})
const store = createStore(rootReducer, undefined)...
const Home = () => <Text style={{}}>Home</Text>
const About = () => <Text style={{}}>About</Text>
​
​
export default class App extends Component<Props> {
  render() {
    return (
        <Provider store={store}>
            <ConnectedRouter history={reduxHistory}>
              <View>
                <Switch>
                  <Route exact path="/" component={Home} />
                  <Route exact path="/about" component={About} />
                </Switch>
              </View>
            </ConnectedRouter>
        </Provider>)
    }
}

至此,React Native 应用已经集成了 Redux,React Router。