2. 程式人生 > >React Native 基礎篇

React Native 基礎篇

阿新 • • 發佈：2018-12-22

雖然React Native出來已經很久了，但是還是想分享一下。技術這東西更新的太快，覺得有用就學，不能猶豫，不然什麼都不會。

一，環境配置

1，這裡講的是window+android配置，如果想了解其他配置請去官網檢視（http://reactnative.cn/）
2，本人的配置步驟：
①，更新sdk，在SDK Platforms視窗中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools視窗中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當然如果其他外掛需要其他版本，你可以同時安裝其他多個版本）。然後還要勾選最底部的Android Support Repository.

②，配置Andorid環境變數，首先得配置JDK環境（JDK1.8及以上，JDK環境配置不再講解）。找到sdk的安裝路徑，我這裡的路徑是 C:\Android\sdk

這裡寫圖片描述這裡寫圖片描述

ANDROID_HOME是變數名稱，建議儘量用這個名字

③，安裝node.js，下載地址:

https://nodejs.org/en/ 這兩個版本都可以，暫時沒發現問題。推薦安裝穩定版

node.js下載

安裝時一路下一步就行，安裝完成測試環境配置。預設安裝會自動配置環境變數，如果手動修改了安裝路徑，可手動配置環境變數。配置方式:找到安裝完成的nodejs資料夾，配置到系統path下

node.js環境變數配置

環境測試

④，開啟控制檯，分別執行這兩行命令（npm映象加速後面的過程）
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global
之後執行（Yarn是Facebook提供的替代npm的工具，可以加速node模組的下載）
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

⑤，新建一個資料夾，我這裡建立了ReactNative資料夾,在位址列中輸入cmd然後回車，執行react-native init demo1,進行建立專案，demo1是專案名稱。建立專案過程比較慢耐性等待，可以喝杯茶。

這裡寫圖片描述

這裡寫圖片描述

專案建立完成，開啟專案目錄。先連線手機開啟除錯模式，建議用真機測試。輸入命令:react-native run-android 執行專案，專案執行也比較慢，耐心等待，可以喝杯可樂。

這裡寫圖片描述

專案執行完成，執行專案會自動啟動一個視窗，這個視窗是本地服務，除錯過程中不要關閉。這裡也可以先啟動服務再執行專案，啟動服務命令：react-native start。如果專案已經執行在手機，下次只需要啟動服務就可以。

這裡寫圖片描述

看到這個頁面，恭喜你成功了

這裡寫圖片描述

⑥，看著很流暢吧，咔咔咔的就配置成功了。然並卵，很多時候是不成功的，由於我們需要科學上學，出現問題最多的還是，執行專案的時候，當你還在糾結是不是環境配錯了，然而並沒有。由於開發環境整合的東西多，有很多jar需要下載，大部分問題都是jar下載出的問題。

這裡給出以下解決方式，第一：可以翻牆試試。第二：自己家的網路不好的話，可以在朋友家，公司等地試試，如果成功了，開啟電腦user目錄中找到.gradle資料夾，拷貝到自己的電腦上。有人會說你腦殘吧，我沒有朋友沒有公司怎麼辦，那這樣只能自己去下載相關的jar。如果再有問題我們私聊吧。

附錄：開發中需要初始化以前的版本，怎麼辦

1，先安裝rninit工具，執行命令

npm install -g rninit

2，初始化版本命令

rninit init demo2 -source react-native@0.x.x

這裡寫圖片描述

3 ，檢視歷史版本命令

npm view react-native versions -json

二，開發和除錯

1，開發工具：這裡推薦使用Visual Studio Code，安裝步驟一路下一步就行，安裝完成可以開啟自己的專案，安裝React Native Tools外掛。介紹幾個外掛僅供參考，Auto Close Tag（自動補全），Color Highlight(顏色預覽)，Rainbow Brackets（不同型別的括號進行彩色著色，支援圓括號，方括號和花括號），Flow Language Support（ JavaScript 程式碼靜態型別檢查的工具），Prettier（Javascript 程式碼的格式化工具）

這裡寫圖片描述

2，專案結構:

這裡寫圖片描述

3，裝了這麼久了，可以寫程式碼了

開啟App.js，隨意修改Text中的內容並且儲存

這裡寫圖片描述

修改後想要在手機上看到，首先長按手機選單鍵，點選Reload就會更新內容

這裡寫圖片描述

這時如果拔掉資料線再點選Reload,會有以下提示，需要和電腦ip保持一致。還是長按選單鍵，開啟Dev Settins選項，點選Debugging,輸入電腦ip:8081。再次點選Reload就會重新連線上。

這裡寫圖片描述

這裡寫圖片描述

注意：如果每次改程式碼，都得開啟選單，點選Reload未免有點麻煩。這時可以設定選單中的enable hot reloading,這樣只要修改程式碼後儲存下，就能立即看到更新。

4，除錯 ：

①，ReactNativeTools外掛裝好後。在Visual Studio Code中按F1，輸入start或者run,會出現Start Packager或Run Android on Device然後回車，這樣就能啟動服務了或執行專案了，和在cmd框中輸入效果一樣，在工具的控制檯中可以看到服務已經啟動。

這裡寫圖片描述

這裡寫圖片描述

②，可以看到工具中有個爬蟲按鈕，進入除錯模式，打斷點。這時開啟手機選單點選Debug JS Remotely就能定位到當前斷點。有關除錯更多技巧，這裡不再多講，自己去探索發現吧。

這裡寫圖片描述

③，在網頁中的除錯方式：瀏覽器中輸入http://localhost:8081/debugger-ui 最好是谷歌瀏覽器，開啟Chrome選單->選擇更多工具->選擇開發者工具，同時開啟手機選單選擇Debug JS Remotely。記著要連線電腦ip喲

這裡寫圖片描述

④，基礎部分
程式入口程式碼：在老版本中分別有index.andorid.js和index.ios.js，執行時會自動匹配是安卓或ios。在新版本中只有index.js一個檔案，在執行的demo1中，index.js呼叫App.js。

提示：在React Native元件是一個顯示的元素，通常被編寫在它的父類元件的render函式返回值中。當它被渲染是，手機UI介面會出現對應的顯示區域。元件通過AppRegistry的靜態函式registerComponent向React Native 框架註冊實現。

這裡寫圖片描述

三，元件樣式

想要開發出好看的UI，必須離不開樣式。樣式是以鍵值對的方式出現的，鍵為某型別，值就是某型別對應的取值。這裡樣式只介紹一部分，想了解更多可以去http://reactnative.cn/docs/0.49/layout-props.html#content

1，flexDirection鍵：指定子元件如何排列，取值有，row，column，如果沒有指定預設為column。示意圖如下

這裡寫圖片描述

2，flexWrap鍵：通常和flexDirection鍵配合使用，按照flexDirection決定的方向一直排列下去，取值有，wrap或nowrap。預設值為nowrap，表示不自動換行或換列。示意圖如下

這裡寫圖片描述

注意：

  • 當flexWrap取值為wrap,父元件右側（flexDirection為row）或者父元件下側（flexDirection為column）所剩空間不足時，下一個元件會換行或下一列頭顯示，導致原來的行或列中有空白部分。可以通過設定背景色或背景圖解決。

  • 當flexWrap取值為wrap時，還需要與下面要講的alignItem鍵配合使用，並且alignItem鍵不能取值為“stretch”

3，justifyContent鍵：指定一個方向上如何排列子元件，取值有flex-start，flex-end，center，space-between，space-around。示意圖依次為如下

這裡寫圖片描述

4，alignItems鍵：指定子元件的對齊方式，取值有flex-start（頂部對齊），flex-end（底部對齊），center（中部對其），stretch（拉長對其）。示意圖依次為如下

這裡寫圖片描述

5，flex鍵：指定子元件自動縮放，取值為0或1，預設值為0。當取值為1時，子元件將自動縮放以適應父元件剩下的空白空間。

注意：
flex自動縮放不僅可以改變自己的寬，高與位置，還可以改變與它同級的其他組建的位置。

6，alignSelf鍵：讓元件忽略它的父元件樣式中alignItems鍵的取值，取值有auto，flex-start，flex-end，center，stretch。當取值為auto時，表示使用父元件alignItems的值，其他4個和alignItems相同。

7，邊框（border），空隙（margin），填充（padding）
①，邊框寬度：borderWidth，borderTopWidth，broderRightWidth，borderBottomWidth和borderLeftWidth。邊框顏色：
②，空隙寬度：margin，marginHorizontal，marginVertical，marginBottom，marginLeft，marginRight，marginTop
③，填充寬度:padding，paddingHorizontal（對水平方向兩邊有效），paddingVertical（對垂直方向兩邊有效），paddingBottom，paddingLeft，paddingRight，paddingTop。

講了這麼多，來段程式碼練習以下

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.view1} />
        <View style={styles.view2} />
        <View style={styles.view3} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "flex-end",
    justifyContent: "flex-start",
    backgroundColor: "grey",
    height: 200
  },
  view1: {
    marginLeft: 30,
    height: 90,
    width: 50,
    backgroundColor: "red"
  },
  view2: {
    marginLeft: 30,
    height: 60,
    width: 60,
    backgroundColor: "blue"
  },
  view3: {
    marginLeft: 30,
    height: 80,
    width: 70,
    opacity: 0.5,
    backgroundColor: "#00FF00"
  }
});

四，常用元件

元件也是開發中重要的一環，這裡只介紹部分常用元件的用法
**1，View元件：**View元件是React Native最基本元件，很多元件都繼承了View元件，也支援View元件的樣式，回撥函式等。

①，元件的常用樣式：

  • 背景色：backgroundColor
  • 透明度：opacity（0~1，0為全透明）
  • 邊框風格：borderStyle（solid實線，dotted點狀線，dashed虛線）
  • 邊框顏色：borderTopColor，borderRightColor，borderBottomColor，borderleftColor
  • 圓角邊框：borderRadius（四個角都有效），borderTopLeftRadius，borderTopRightRadius，borderBottomLeftRadius，borderBottomRightRadius
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.view1} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    height: 200,
    backgroundColor: "#000000"
  },
  view1: {
    marginTop:30,
    marginLeft:30,
    height: 90, 
    width: 90,
    opacity:0.8,
    backgroundColor: "#FF0000",
    borderRadius:50,
    borderStyle:'dashed',
    borderWidth:2,
  },
});

②，View的變形：transform可以實現元件變形，變形包含translate（平移），scale（縮放），rotate（旋轉），skew（傾斜）。以下是transform程式碼格式

  transform:
    [
      {rotate:string},
      {rotateX:string},
      {rotateY:string},
      {scale:number},
      {scaleX:number},
      {scaleY:number},
      {translateX:number},
      {translateY:number},
      {skewX:string},
      {skewY:string}
    ]
  }

X表示橫座標，Y表示縱座標。角度用deg表示，取值為0~360。旋轉不會改變元件元件的形狀，傾斜會改變。以下是部分程式碼片段

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Text style={styles.text1}>React1 Native</Text>
       <Text style={styles.text2}>React2 Native</Text>
       <Text style={styles.text3}>React3 Native</Text>
       <Text style={styles.text4}>React4 Native</Text>
       <Text style={styles.text5}>React5 Native</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
   flex:1,justifyContent:'center',alignItems:'center',
   backgroundColor:'#F5FCFF'
  },
  text1:{
    fontSize:20,
    color:'black',
    transform:[{rotate:'45deg'}] //不指定旋轉軸
  },
  text2:{
    fontSize:20,
    color:'black',
    transform:[{rotateX:'120deg'}] //X軸旋轉
  },
  text3:{
    fontSize:20,
    color:'black',
    transform:[{translateX:100}] //X軸平移
  },
  text4:{
    fontSize:20,
    color:'black',
    transform:[{scaleX:2}] //X軸放大
  },
  text5:{
    fontSize:20,
    color:'black',
    transform:[{skewX:'90deg'}] //X軸傾斜
  }
});

2，Image元件：圖片載入元件。可以給定網址，本地檔案或者專案資原始檔載入圖片。

①，載入網路圖片，載入圖片要給出圖片的寬高。

  <Image source={{uri: '圖片地址'}}
       style={{width: 400, height: 400}} />

②，載入靜態圖片，這裡路徑一定要注意。

 //方式1
 <Image source={require('./image1.png')} />
 //方式2
 <Image source={require('./images//image1.png')} />

 //注意：這種方式是錯誤的，原因require中的圖片名字必須是一個靜態字串（不能使用變數！因為require是在編譯時期執行，而非執行時期執行！）
 var icon="./images//image1.png"
 <Image source={require(icon)} />

這裡寫圖片描述

③，resizeMode鍵（元件模式）：cover（填充整個元件的顯示區域，會對圖片進行裁剪），contain（顯示整張圖片，不會裁剪圖片，不會填充整個元件，是等比縮放），stretch（填充整個元件的顯示區域，顯示整張圖片）

3，Text元件：字型顯示元件。
①，元件的一些常用樣式

  • fontStyle鍵：取值normal（正常字型，預設），italic（斜體）
  • fontSize鍵：字型大小
  • fontWeight鍵：取值有normal（正常字型），bold（粗體） ,100~900（粗體程度逐漸增加）
  • textAlign鍵：取值有auto，left，right，center，justify
  • lineHeight鍵：每一行的高度
  • textDecorationLine鍵：取值有none（沒有裝飾線），underline（下面線裝飾），line-through（裝飾線貫穿裝飾），underline-through（下面線貫穿裝飾）。

②，Text元件可以進行巢狀，巢狀時將繼承父Text元件樣式，但是不會覆蓋，只會增加樣式。

4，TextInput元件：文字輸入元件
①，元件的一些常用樣式

  • autoCapitalize鍵：取值有none（不自動變為大寫），sentences（每句話首字母大寫），words（每個但是首字母大寫），characters（每個英文字母大寫）
  • autoCorrect鍵：布林型別，如果為false，會關閉拼寫自動修正。預設值是true
  • autoFocus鍵：布林型別，如果為true，在componentDidMount後會獲得焦點。預設值為false
  • defaultValue鍵：字元型別，用來定義預設字元
  • editable鍵：布林型別，如果為false，文字框是不可編輯的。預設值為true。
  • keyboardType 鍵：軟鍵盤的型別，取值有default，numeric，email-address，phone-pad ······等
  • maxLength 鍵：數值型別，限制文字框中最多的字元數
  • multiline 鍵：布林型別，如果為true，文字框中可以輸入多行文字。預設值為false
  • placeholder 鍵：如果沒有任何文字輸入，會顯示此字串
  • placeholderTextColor 鍵：佔位字串顯示的文字顏色

簡單示例，這裡需要注意一些屬性不能寫在StyleSheet中，如：placeholder屬性直接寫在TextInput元件中

import React, { Component } from "react";
import { StyleSheet, Text, View, Image, TextInput } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View>
        <TextInput
          style={styles.textinput1}
          placeholder={"請輸入使用者名稱"}
          autoCapitalize={"characters"}
        />
      </View>
    );
  }
}
var styles = StyleSheet.create({
  textinput1: {
    width: 300,
    height: 80,
    fontSize: 28,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

②，常用回撥函式

  • onBlur：當文字框失去焦點的時候呼叫此回撥函式
  • onChange：當文字框內容變化時呼叫此回撥函式
  • onChangeText：當文字框內容變化時呼叫此回撥函式。改變後的文字內容會作為引數傳遞
  • onEndEditing：當文字輸入結束後呼叫此回撥函式
  • onFocus ：當文字框獲得焦點的時候呼叫此回撥函式
  • onSubmitEditing ：此回撥函式當軟鍵盤的確定/提交按鈕被按下的時候呼叫此函式。如果multiline={true}，此屬性不可用

簡單示例，onChangeText函式用法

import React, { Component } from "react";
import { StyleSheet, Text, View, Image, TextInput } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View>
        <TextInput
          style={styles.textinput1}
          placeholder={"請輸入使用者名稱"}
          autoCapitalize={"characters"}
          onChangeText={text => this.setState({ text })}
        />
        <Text style={{ padding: 10, fontSize: 42 }}>{this.state.text}</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  textinput1: {
    width: 300,
    height: 80,
    fontSize: 28,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

以上就是React Native框架一些基礎部分，以後有時間會繼續分享更深入的部分。

相關推薦

React Native 基礎篇

雖然React Native出來已經很久了，但是還是想分享一下。技術這東西更新的太快，覺得有用就學，不能猶豫，不然什麼都不會。 一，環境配置 1，這裡講的是window+android配置，如果想了解其他配置請去官網檢視（http://reactnative.cn/） 2，本人

React Native 基礎篇 之 ListView 產品列表實現

1.為了測試用的是本地圖片，首先圖片資源整合到專案中。 這裡是android適配的專案 將圖片資源放置在下面 通過json 方式訪問 專案名稱\android\app\src\main\res\drawable 檔案   NewWine.json { "data":[

React入門----基礎篇

遍歷屬性 fun element 開始 col imp 編程 ring tle React 背景介紹 React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網

react native基礎

初始化 dcom 更新 con one stat The 銷毀 變化 react native 的兩個核心的屬性控制改變組件：props和state。props是在父組件中進行設置，只要設置完成那麽在組件的生命周期就定死了，不會發生改變。針對數據變化修改的情況，我們需要使用

React Native基礎元件

轉載請註明出處：小樓一夜聽春雨的專欄http://blog.csdn.net/win816723459/article/details/54134171 本節主要介紹以下元件 View 容器元件（同Html中的div標籤） Text 文字元件（同Html中的p標籤）

美團React Native基礎元件庫beeshell詳解

近年來，伴隨著大前端概念的提出和興起，移動端和前端的邊界變得越來越模糊，湧現了一大批移動跨平臺開發框架和模式。從早期的PhoneGap、inoc等Hybird技術，到現在耳熟能詳的React Native、Weex和Flutter等技術，無不體現著移動端開發的前

React路由-基礎篇

React-Router-DOM 安裝 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.建立一個資料夾react-router-dom，建立一個index.js檔案 2.引入BrowserRouter as Router(可以

React Native基礎&入門教程：初步使用Flexbox佈局

在本篇裡，讓我們一起來了解一下，什麼是Flexbox佈局，以及如何使用。 一、長度的單位 在開始任何佈局之前，讓我們來首先需要知道，在寫React Native元件樣式時，長度的不帶單位的，它表示“與裝置畫素密度無關的邏輯畫素點”。 這個怎麼理解呢？ 我們知道，螢幕上一個發光的最小點，對應著一

React Native基礎&入門教程：以一個To Do List小例子，看props和state

本文由葡萄城技術團隊於部落格園原創並首發 轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 在上篇中，我們介紹了什麼是Flexbox佈局，以及如何使用Flexbox佈局。還沒有看過的小夥伴歡迎回到文章列表點選檢視之前的文章瞭解。 那麼，當我們有了基本

React Native基礎&入門教程：除錯React Native應用的一小步

React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的除錯工具去Debug移動端的程式碼，無疑是最吸引開發人員的特性之一。 試想一下，當你在手機螢幕按下一個按鈕，處理事件的程式碼就可以立即在瀏覽器的除錯工具裡進行斷點除錯，而且每當你對程式碼進行修改，介面便可以完成

React Native入門篇—第二步建立APP專案

本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs

React Native入門篇—第一步軟體安裝和環境配置

本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs

React Native入門篇—第三步專案常用依賴包的安裝和配置

本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs

React Native入門篇—react-native-splash-screen的安裝和配置

注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs/getting-started/ react-native-splash-screen官方文件：https://github.com/crazycod

React Native入門篇—react-native-swiper的安裝和配置

注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs/getting-started/ react-native-swiper官方教程：https://github.com/leecade/react-n

React Native入門篇—redux react-redux react-navigation-redux-helpers的安裝和配置

注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs/getting-started/ redux官方文件：https://www.redux.org.cn/ 專案地址GitHub地址：https:/

React Native入門篇—react-navigation路由配置

本人學習React Native沒有看過任何教學視訊，都是按照官網一步步學習的。只研究了Android開發，所以下面的教程都是Android開發教程。 注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs

React Native 基礎 之ListView實現吸頂效果

當滑動時，這個section header會固定在頭部，也就是吸頂效果。但是遺憾的是，在Android平臺上不支援吸頂效果 實現吸頂效果需要用到此方法 cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIde

React Native基礎&入門幸運28加拿大28原始碼下載網站開發教程：除錯React Native應用的一小步

React Native(幸運28加拿大28原始碼下載網站開發【大神原始碼論壇】dsluntan.com  【布丁原始碼論壇】budingbbs.com 企娥3393756370)為傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的除錯工具去Debug移動端的程式碼，無疑是

React-native基礎介紹

JSX語法 如果僅僅是開發react/react-native，個人覺得，沒必要專門學習什麼是jsx，我們只需要它的一些基本的知識就足夠了。 jsx語法，一定要記住這樣的一句話，它是把HTML模板和JavaScript進行混寫的一種語法風格。使用<&g