1. 程式人生 > >react-native學習(1)

react-native學習(1)

搭建開發環境
react-native安裝環境比較麻煩,筆者是做Android開發的,Android環境的搭建就不在說明,這裡重點說明搭建react-native
的開發環境
1、安裝windows下的包管理器
Chocolatey

Chocolatey是一個Windows上的包管理器,類似於linux上的yum和 apt-get。 你可以在其官方網站上檢視具體的使用說明。一般的安裝步驟應該是下面這樣:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"
&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

一般來說,使用Chocolatey來安裝軟體的時候,需要以管理員的身份來執行命令提示符視窗。譯註:chocolatey的網站可能在國內訪問困難,導致上述安裝命令無法正常完成。請使用穩定的翻牆工具。 如果你實在裝不上這個工具,也不要緊。下面所需的python2和nodejs你可以分別單獨去對應的官方網站下載安裝即可。

     2、安裝Python 2

開啟命令提示符視窗,使用Chocolatey來安裝Python 2.

choco install python2
可以看到,在安裝了choco後安裝軟體還是挺方便的。
     3、安裝
Node
 開啟命令提示符視窗,使用Chocolatey來安裝NodeJS。注意,目前已知Node 7.1版本在windows上無法正常工作,請避開這個版本!
choco install nodejs.install
同安裝python一樣

這裡有一個地方需要注意,安裝好node後在命令列視窗內輸入npm -v檢視是否安裝成功,有可能安裝成功後會提示npm不是命令(我就

碰到了這種情況),正常情況下node安裝成功後不會這種情況的,解決辦法也很簡單,在node的安裝目錄找到node.exe,然後以管理員身份運

行即可。

配置映象加速

npm config set registry https://
registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
    4、安裝git

你可以使用Chocolatey來安裝git:

choco install git

另外你也可以直接去下載Git for Windows。 在安裝過程中注意勾選"Run Git from Windows Command Prompt",這樣才會把git命令新增到PATH環境變數中。

如果沒有使用gti for windows,注意需要自己手動配置一下git的環境變數

具體看這篇blog:http://blog.csdn.net/exlsunshine/article/details/18939329

5、安裝react-native

  • 開啟CMD命令視窗,選擇自己要放的檔案目錄下,使用git clone命令從github克隆react-native至本地
  • git clone https:github.com/facebook/react-native.git
  • 克隆成功後

    接著進入react-native目錄下的react-native-cli目錄,輸入命令

  • npm install -g

  • 到這裡所有的環境搭建工作就完成了。接下來我們會建立專案執行,

  • 6、建立react-native專案

    • 指定到目錄下執行以下命令,建立新的專案AwesomeProject。
    react-native init AwesomeProject
    • 1

由於被牆的原因,會比較慢,耐心等待! 

執行package

  • 進到剛建立的AwesomeProject,執行react-native start。
cd AwesomeProject
react-native start
* 此時可以通過瀏覽器訪問 http://localhost:8081/index.android.bundle?platform=android,出現如下頁面表示服務端已經可以了。 
這裡寫圖片描述

cmd執行專案

一種先開啟模擬器或者連結手機裝置。

  • 另外再啟動一個新的命令列,到你的專案下,執行(裝置允許usb除錯)。
react-native run-android
就可以看到專案執行起來了。

相關推薦

react-native學習(1)

搭建開發環境 react-native安裝環境比較麻煩,筆者是做Android開發的,Android環境的搭建就不在說明,這裡重點說明搭建react-native 的開發環境 1、安裝windows下的包管理器 ChocolateyChocolatey是一個Windows

React-Native學習(1)-開發環境的配置

一、開發環境的配置 1、安裝Git 2、安裝Node.js(這個是必須安裝的) 二、準備工作 1、安裝react-native的命令,開啟cmd,輸入下面的命令 —npm install -

React Native 學習從0至1-第二篇-FlatList

1. 折騰了兩三個小時才出來一個介面,先上坑 2. 程式碼如下 export default class App extends Component { render() { var data = []; for (var i = 0; i

React Native 學習從0至1-第一篇

一.新建一個ReactNative 專案 步驟:1.進入終端使用終端命令:react-native init 專案名稱 2.使用cd進入專案檔案路徑 3.執行reacnative 專案 終端命令:react-native run-ios 或者 在reacnative 專案中找到IOS資料夾,開啟直接

react native 學習native modules

每一個 nsstring類 了解 lba 執行過程 span nsnumber 開發 github 翻譯自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Module

React-Native 學習筆記-Android開發平臺-開發環境搭建

環境變量 最新版 下載 and 系統 系統環境變量 新版本 開發環境 studio 詳細步驟請查看官網對應文檔,BUT,有些註意事項請註意! 1,優先安裝Node.js,因為後面可以使用npm安裝軟件, 2,註意不要使用CNPM!!!!!!!!! 3,Android

React Native學習(八)—— 對接七魚客服

clas render round 外部文件 bubuko source his 代碼 veh 本文基於React Native 0.52 Demo上傳到Git了,有需要可以看看,寫了新內容會上傳的。Git地址 https://github.com/gingerJY/Rea

react-native 學習(二)

androi bsp ger net devel 瀏覽器 sim 百度 解決方法 上一節講到了 react-native的開發環境的配置,,這一節我門具體講講怎麽看樣式,怎麽調試 看樣式的話 有一個 神奇 react-native-developer tools(個人推薦,

react-native 學習(三)

-s 樣式 dimens screen gpo 像素 github php 我們 上一次講到了react-native 的配置環境 和 如何去進行調試,這一次我們說一說,關於react-native的 樣式兼容問題。 由於iphonex的發售,在兼容的時候,我門也需要去考慮

React Native學習筆記 -- 開發環境搭建

ebo 安裝完成 原因 包管理工具 chown iss 運行 遇到 命令 工欲善其事,必先利其器。這次主要介紹mac osx下React Native的開發環境的搭建。 homebrew mac上的包管理工具,用於安裝nodejs和其他一些工具軟件,在terminal輸入下

React Native學習(九)—— 使用Flexbox布局

styles BE art 分享圖片 category urn def ger p s 本文基於React Native 0.52 Demo上傳到Git了,有需要可以看看,寫了新內容會上傳的。Git地址 https://github.com/gingerJY/React-N

React JS和React-Native學習指南

cno example part div roman javascrip add pull tree 自己在學習React-Native過程中整理的一份學習指南,包含 教程、開源app和資源網站等,還在不斷更新中。歡迎pull requests! React-Native學

React Native學習

包管理 管理工具 pre audio one andro pan star display 學習 首先,假使你已經安裝了Nodejs 6,也有使用npm進行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作為包

React-Native學習之 防止鍵盤遮擋TextInput

import React, {Component} from 'react'; import ReactNative, { AppRegistry, StyleSheet, Text, View, Image, TextInput,

React-Native學習之第三方開源元件--側滑欄----react-native-side-menu

react-native-side-menu 側滑欄元件 1.匯入方式 切換到當前目錄在命令列執行下面的命令 npm install react-native-side-menu --save 開啟package.json檢視是否成功匯入

React-Native學習--輪播圖第三方元件-react-native-swiper

一.通過npm安裝react-native-swiper $ npm install react-native-swiper --save $ npm i react-timer-mixin --save 二.在專案中匯入 import Swiper from

React-Native學習--第三方 底部Tab react-native-tab-navigator

1.下載 npm install react-native-tab-navigator –save下載 2. 匯入 import TabNavigator from 'react-native-tab-navigator' 3. 完整程式碼 import Reac

React-Native學習之 圖片做背景 modal 點選其他區域消失

1.modal點選其他區域消失 <TouchableWithoutFeedback onPress={()=>this.setState({showTopMenu:false})}> <View style={{position:

React Native學習(一) 環境搭建

需安裝工具 RN環境: [必須] Node [必須] react-native-cli [可選] Node Package Manager(npm):node包管理工具,一般安裝Node會帶上npm * [可選] Node Version Manager(nvm):node版本管理工具 *

用 Swift 解讀 React/React Native: Part 1

React & React Native 不只是一種框架,它更是一種思維方式和方法論。 Glow 使用 React Native 至今一年半有餘,專案裡也有越來越多的元件被重構成 React Native。在使用 React Native 開發的過程中,我們對 Re