react安装_React-native环境搭建

36e8de5a66179344372a3a0fbf0f2a14.png

自己有android原生开发的经验,但是现在是一名web前端工程师,熟悉完react这个框架之后,最近在上手react-natvie这个框架,使用JavaScript和React编写原生移动应用这是官方对react-native的定义.让我们先来看一段代码.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          如果你喜欢在Web上使用React,那你也肯定会喜欢React Native.
        </Text>
        <Text>
          基本上就是用原生组件比如'View'和'Text'
          来代替web组件'div'和'span'。
        </Text>
      </View>
    );
  }
}
//熟悉react的朋友应该都看得懂这个代码

那我们接下来搭建环境试一试,官方推荐安装android studio 主要是使用它的SDK和模拟器

1.首先安装脚手架npm install -g yarn react-native-cli

2.安装完之后就可以创建一个react-native的项目了 使用react-nativeinit AwesomeProject

3.创建完之后想调试这个程序就需要开始搭建android的开发环境了

配置sdk的环境,已经adb的环境

推荐直接安装android studio http://www.android-studio.org/ 下载链接在这里.

具体操作如下:

1.打开控制面板->系统和安全->系统->高级系统设置->高级->环境变量->新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录 例如我自己的是F:/android/sdk

2.打开控制面板->系统和安全->系统->高级系统设置->高级->环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。例如我自己的是F:/android/sdk/platform-tools

3.敲命令adb-V出现版本号就证明adb的环境变量已经搭建好了

到这里环境已经搭建好了 就开始使用react-native run-android 来跑一跑这个项目

f169a66a1b064c382876e68bf29af495.png

dd1b13dfa3c584fc6dc0b1ecd58d0c32.png

f03c98492e61dc5dd7325c9350a54e82.png

现在app已经跑起来了,支持热更新. Ide的话个人推荐Vs Code,功能强大非常好用.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搭建 React Native 环境需要以下步骤: 1. 安装 Node.js React Native 依赖 Node.js 运行环境,因此需要先安装 Node.js。你可以在官网上下载适合你操作系统的版本并安装。 2. 安装 React Native 命令行工具 在终端运行以下命令安装 React Native 命令行工具: ``` npm install -g react-native-cli ``` 3. 安装 Java SE Development Kit 安装 Java SE Development Kit (JDK) 是因为 React Native 的一些依赖需要 Java。你可以在官网上下载适合你的操作系统的版本并安装。 4. 安装 Android Studio 安装 Android Studio 是因为 React Native 开发需要 Android 环境,Android Studio 提供了 Android 的开发工具和模拟器。你可以在官网上下载适合你操作系统的版本并安装。 5. 配置 Android SDK 在 Android Studio 配置 Android SDK。打开 Android Studio,选择 "Configure" -> "SDK Manager",在 "SDK Platforms" 标签页选择相应的 Android 版本并安装,然后在 "SDK Tools" 标签页安装 "Android SDK Build-Tools" 和 "Android SDK Platform-Tools"。 6. 配置环境变量 将以下路径添加到环境变量: ``` ANDROID_HOME=<path to Android SDK> ``` 将 `<path to Android SDK>` 替换成你的 Android SDK 的路径。在 macOS 或 Linux ,可以将以上命令添加到 `~/.bash_profile` 文件。 7. 创建 React Native 项目 在终端运行以下命令创建一个新的 React Native 项目: ``` react-native init <project name> ``` 将 `<project name>` 替换成你的项目名称。等待一段时间,直到项目创建完成。 8. 运行 React Native 项目 进入项目目录,运行以下命令启动项目: ``` cd <project name> react-native run-android ``` React Native 将会自动编译和安装应用程序到模拟器或连接的设备
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值