react_note

時間 2020-02-13

標籤 react note 欄目 React 简体版

原文原文鏈接

移動App第3天

複習

爲何要學習webpack，對一些語法糖高級語法進行解析降檔css
可以說出Webpack的做用html
- 他是一款前端的開發構建工具，可以對高級語法進行解析降檔，可以進行打包壓縮等等處理操做
可以說出webpack打包時loader加載的原理前端
- 找到js文件，識別js文件中是否有webpack不認識的語法，若是有，就會去找合適的loader
- 若是找到了相關的loader，就直接處理
- 若是沒找到，報錯
- babel bableloader bable-core 字典 es2015 stage-0 plugin tranform runtime
可以使用開發時候的webpack配置文件vue
掌握webpack-dev-server的使用java
掌握html-webpack-plugin的使用react
瞭解什麼是webpack的發佈策略android
- 寫一個單獨的發佈的配置文件
- 經過webpack --config 配置文件名稱
- 配置文件中，刪除開發相關的配置項，加入一些發佈相關配置項
瞭解常見插件的使用webpack

什麼是React

facebook 在開發大型網站時發現一些問題直接使用HTML，js ，css，網站健壯性差，不利於維護，複用性差
當時angular.js 1.x react
2013年5月份facebook將react開源
vue 2014年， 2016 2.0版本
angular.js， vue.js， react.js

React與vue.js的對比

首先，這兩個框架，都是以組件化的思想進行開發的！
什麼是模塊化：模塊化就是將一個程序按照功能進行拆分，分紅相互獨立的模塊，以便每一個模塊只包含與其功能相關的內容。
- 針對功能方面進行拆分，每一個模塊只包含與其功能相關的內容
什麼是組件化：組件化就是基於可重用的目的，將一個大的軟件系統按照分離關注點的形式，拆分紅多個獨立的部分，每一個獨立的部分稱之爲一個組件。
- 從UI的方面進行功能的拆分
粒度：模塊化要比組件化的粒度更細
從社區的角度去看兩個框架：
- 由於react他的時間更長，社區相對會更加豐富
從開發者的角度去看兩個框架：
- facebook 技術實力雄厚不會出現斷更的狀況一直更新
- vue 由尤雨溪開發如今也有一個開源團隊去進行維護
從開發的角度去進行對比
- vue：.vue文件
  - template：模板文件，至關於html
  - script：邏輯部分，至關於js
  - style：樣式部分，至關於css
- react：
  - 沒有給咱們提供相似vue的.vue文件
  - 而是直接使用js進行開發

爲何要學習React

React社區強大，不會出現忽然斷更的狀況！
開發團隊給力，技術雄厚！
能夠轉到ReactNative上進行移動App開發體驗！
React很是適合大型項目的開發，項目越大，React的優點體現的也就越明顯！

React中幾個核心的概念

虛擬DOM（Document Object Model）

爲何要實現虛擬DOM：由於瀏覽器中默認實現DOM更新的方式速度很慢，效率地下，因此須要經過本身實現虛擬DOM，來提升DOM更新效率！
什麼是React中的虛擬DOM：就是利用JS對象的形式，來模擬一顆真正的DOM樹。
虛擬DOM的目的：提升DOM的渲染效率！

Diff算法

tree diff: 將新舊兩顆DOM樹，相同的層級節點，從上到下，逐層進行對比的過程，叫作tree diff。好處：對比次數少，當把整個DOM樹每一層梳理完成以後，則就找到了須要更改的元素！
component diff：在對比每一層的時候，對每一層中的組件進行對比，若是組件類型相同，則暫時認爲不須要修改，若是類型不相同，則刪除舊組件，建立新組建，將新組建替換到舊組件的位置！
element diff:當組件類型相同的時候，須要對組件中的每個元素進行對比，這種對比方式，叫作element Diff。
在經過for循環，循環建立類型相同的組件或者元素的時候，最好爲每個建立的東西，添加一個惟一的key值，這樣能提升咱們虛擬DOM的對比效率！

React項目的建立

運行cnpm i react react-dom --save安裝react依賴包
導入相關模塊：

// react這個模塊，是專門用來建立虛擬DOM元素，或者建立React組件，包括組件的生命週期等一系列和虛擬DOM相關的東西，都在這個模塊中進行定義
import React from 'react'
// react-dom這個模塊，是幫咱們進行DOM操做的模塊，好比說：將建立好的虛擬DOM元素，掛在到頁面指定的容器中，就是經過這個模塊進行實現的
import ReactDOM from 'react-dom'

使用React.createElement來建立虛擬DOM： // React.createElement方法中，參數列表的含義： // 第一個參數：用字符串，指定要建立的元素的類型 // 第二個參數：用對象，指定要建立的元素的相關屬性 // 第三個參數：any，指定要建立的元素的子節點 // 從第三個參數開始，都是當前建立元素的子節點！！！

// 建立一個div元素，這是屬性，同時設置兩個子節點
var divObj = React.createElement('div', {id:'div1', title:'this is a div'}, '彬哥好帥啊，崔剛老師更帥！', h1Obj);

使用ReactDOM.render渲染虛擬DOM：

ReactDOM.render(divObj , document.getElementById('app'));

JSX語法

在JSX語法中，出現 {} 的時候，就表示說，咱們要在 {} 內部，寫JS語法了！git
只要是符合JS語法規範的，均可以向 {} 書寫！程序員
在JSX語法中，若是想給元素添加類樣式，須要用 className 來代替 class ，由於 class 是ES6中的關鍵字！
與 className 相似，label的 for 屬性也是一個JS關鍵字，須要用 htmlFor 來代替！
使用JSX語法必需要配置webpack的loader，使用babel-loader去解析JSX語法
安裝babel-loader的命令中須要新增一個babel-preset-react
整個安裝命令：
- cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev
- cnpm i babel-preset-es2015 babel-preset-stage-0 babel-preset-react --save-dev

.babelrc文件

{
  "presets":["es2015","stage-0","react"],
  "plugins":["transform-runtime"]
}

React中：第一種建立組件的方式

第一種基本組件的建立方式

使用構造函數的形式，來建立一個React中最基本的組件,名字叫作Hello
怎麼使用自定義組件：以標籤的形式，將組件引用到須要的地方便可！
在構造函數建立的組件中，必須return一個元素或者一個null，不然，會報錯！

function Hello(){
    return <div>
        {/*這是一個註釋，你確定看不到我，由於我是註釋*/}
        <br/>
        這是一個Hello組件
    </div>;
}

以標籤的形式去引用組件：

<Hello name="zs" age={20} gender="男"></Hello>

父組件向子組件傳遞數據

經過屬性的方式，向組件中傳遞數據：

<Hello name="zs" age={20} gender="男"></Hello>

在構造函數建立的組件中，如何獲取到傳遞進來的數據,使用參數列表中的props來接收：（想要在頁面上顯示props屬性，須要安裝一個chrome插件，React Developer Tools）

function Hello(props){
    return <div>
        這是一個Hello組件----- {props.name} ---- {props.age} ---- {props.gender}
    </div>;
}

將組件封裝到單獨的文件中

// 注意：必須導入react模塊，不然會報錯
import React from 'react'

function Hello2(){
    return <div>
        這是一個Hello2組件
    </div>;
}

export default Hello2

React中：第二種建立組件的方式

瞭解ES6中class關鍵字的使用

基於class關鍵字建立組件

使用 class 關鍵字來建立組件

class Person extends React.Component{
    // 經過報錯提示得知：在class建立的組件中，必須定義一個render函數
    render(){
        // 在render函數中，必須返回一個null或者符合規範的虛擬DOM元素
        return <div>
            <h1>這是用 class 關鍵字建立的組件！</h1>
        </div>;
    }
}

兩種建立組件方式的對比

用構造函數建立出來的組件：專業的名字叫作「無狀態組件」
用class關鍵字建立出來的組件：專業的名字叫作「有狀態組件」

用構造函數建立出來的組件，和用class建立出來的組件，這兩種不一樣的組件之間的本質區別就是：有無state屬性！！！有狀態組件和無狀態組件之間的本質區別就是：有無state屬性！

一個小案例，鞏固有狀態組件和無狀態組件的使用

經過for循環生成多個組件

數據：

CommentList = [
    { user: '張三', content: '哈哈，沙發' },
    { user: '張三2', content: '哈哈，板凳' },
    { user: '張三3', content: '哈哈，涼蓆' },
    { user: '張三4', content: '哈哈，磚頭' },
    { user: '張三5', content: '哈哈，樓下山炮' }
]

屬性擴散：
- 使用{...item}的方式可以將item對象中的全部元素，以屬性的方式傳遞到應用這個語法的組件上

style樣式

總結

理解React中虛擬DOM的概念理解React中三種Diff算法的概念使用JS中createElement的方式建立虛擬DOM 使用ReactDOM.render方法使用JSX語法並理解其本質掌握建立組件的兩種方式理解有狀態組件和無狀態組件的本質區別理解props和state的區別

移動App第4天

複習

虛擬DOM和Diff算法:提升組件的渲染效率
- treeDiff：按照層的概念去進行比較
- componentDiff ：比較每一個組件
- elementDiff：比較每一個組件中的元素
建立虛擬DOM的兩種方式：
- npm i react react-dom --save
- react：用來建立虛擬DOM
- react-dom：用來操做虛擬DOM
- react.createElement('div', {name:'',id:''}, '內容',...children)
- JSX語法：js的可擴展標記語言，它容許咱們在js文件中使用html標籤去建立虛擬DOM
  - 註釋和js代碼必須用{}包裹
  - class是js的關鍵字要使用className替代
  - for也是js的關鍵字要使用htmlFor去替代
- reactDom.render(VDom, Dom, callback)
兩種組件建立的方式：
- 使用構造函數的方式建立組件：在方法體內必需要return一個null或者是一個虛擬DOM對象：【無狀態組件】props只讀的
- 使用es6中的class關鍵字去建立一個組件：extends react.component，render(){return null/dom}:【有狀態組件】props只讀的，state 表示組件的狀態，可讀可寫
使用style添加樣式：
- style：jsx語法中不能直接接收字符串，必須接收數據對象{ {border: '1px solid red'} }
屬性擴散：
- { ...item }
組件從建立、到加載到頁面上運行，再到頁面關閉組件被銷燬，這期間老是伴隨着各類各樣的事件，那麼這些事件，統稱爲組件生命週期！

組件的生命週期

Vue組件的生命週期
組件生命週期分爲三部分：
- 組件的建立階段：裏面的全部事件都有一個共同點，只執行一次
  - setState：componentWillMount，componentDidMount
- 組件的運行階段：裏面全部的事件也有一個共同點，執行0-N次
  - setState：componentWillReceiveProps
- 組件的銷燬階段：執行1次

React Native 中組件的生命週期

getDefaultProps

在組件建立以前，會先調用 getDefaultProps()，這是全局調用一次，嚴格地來講，這不是組件的生命週期的一部分。在組件被建立並加載候，首先調用 getInitialState()，來初始化組件的狀態。

React生命週期的回調函數總結成表格以下：

組件生命週期的執行順序：

Mounting：

constructor()
componentWillMount()
render()
componentDidMount()

Updating：

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render()
componentDidUpdate(prevProps, prevState)

Unmounting：

componentWillUnmount()

經過Counter計數器的小案例 - 瞭解生命週期函數

給組件設置默認屬性：

// getDefaultProps方法在es6中已經棄用
  // 使用下面的方式進行props的初始化
  static defaultProps = {
    count: 0
  }

給屬性進行類型校驗

// 用來進行屬性校驗，PropsTypes裏面提供了不少的數據類型，可是頁面上照常顯示，只是在開發過程當中給出了錯誤提示
  // 1. npm i prop-types --save
  // 2. import PropTypes from 'prop-types' 
  static propTypes = {
    count: PropTypes.number
  }

組件初始化時生命週期事件總結

componentWillMount：組件還沒建立可使用setState
render：組件渲染建立階段
componentDidMount：組件已經掛載到頁面上可使用setState
注意：在render函數中，不能調用setState()方法：

// 在render方法中，可使用setState方法，可是setState方法會觸發組件從新渲染，從新調用render方法死循環
    // this.setState({
    //   count: 1
    // })

經過原生的方式獲取元素並綁定事件

// 使用原生的方式設置點擊事件
    // document.getElementById('btn').onclick = () => {·
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    // }

使用React中的事件，綁定count自增

給按鈕綁定onClick事件：

<input type="button" value="日本又死人了，柯南要破案了" onClick={ this.onclick } />

使用箭頭函數，建立一個事件響應函數：

onclick = ()=> {
    console.log('點擊事件');
    // 若是不用箭頭函數的方式，這裏獲取的this是null
    // 不是原生js點擊事件裏面獲取的對象
    console.log(this);
    this.setState({
      count: this.state.count + 1
    })
  }

React中使用ref屬性獲取DOM元素引用

給DOM元素添加ref屬性：

<div ref='div1'>小五郎脖子上紮了{this.state.count}針</div>

經過組件的this.refs來獲取對應的引用：

console.log('shouldComponentUpdate---' + this.refs.div1.innerHTML);

組件運行中事件的對比

shouldComponentUpdate：這個方法裏面獲取的state對象和頁面上的元素都是更新以前的

// 組件是否應該已經新
  // 這個方法有返回值，必須是bool類型的值
  // 若是是false說明要阻斷組件的更新
  // 若是是true 組件更新
  // 裏面使用this.state方式獲取的state對象是更新以前的
  // 若是要使用最新的，使用參數的形式進行獲取
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate---' + this.refs.div1.innerHTML);
    // console.log(this.state.count + ' ------------- ' + nextState.count);
    // if(nextState.count % 2 === 0){
    //   return true;
    // }
    return true;
  }

componentWillUpdate：這個方法裏面獲取的state對象和頁面上的元素都是更新以前的
render：頁面上的元素都是更新以前的
componentDidUpdate：獲取的state和頁面上的元素都是最新的

綁定this並傳參的三種方式

在事件中綁定this並傳參：

<input type="button" value="在事件中綁定this並傳參" onClick={ this.click.bind(this, 'aa', 'bb') }/>

在構造函數中綁定this並傳參:

constructor(){
    super();
    this.state = {
      msg:''
    }

    // 先使用bind方法將this和參數綁定上去，再將綁定以後的方法對象賦值到了click1上
    this.click1 = this.click1.bind(this, 'bb', 'cc');
  }
  
  
  <input type="button" value="在構造函數中綁定this並傳參" onClick={ this.click1 }/>

用箭頭函數綁定this並傳參：

<input type="button" value="使用箭頭函數中綁定this並傳參" onClick={ ()=>{ this.click2('cc', 'dd') } }/>

綁定文本框與state中的值

在Vue.js中，默承認以經過v-model指令，將表單控件和咱們的data上面的屬性進行雙向數據綁定，數據變化和頁面之間的變化是同步的！
在React.js中，默認沒有提供雙向數據綁定這一功能，默認的，只能把state之上的數據同步到界面的控件上，可是不能默認實現把界面上數據的改變，同步到state之上，須要程序員手動調用相關的事件，來進行逆向的數據傳輸！
綁定文本框和state的值：

<input ref="text" type="text" value={ this.state.msg } onChange={ this.changeText }/>
changeText=(e)=>{
    // console.log(e.target.value);
    // setState方法執行更新state的時候，是一個異步的操做，不可以直接獲取到最新的state值
    // setState方法容許咱們傳入一個回調函數，在回調函數中可以獲取到最新的state
    this.setState({
      msg: e.target.value
    }, function(){
       console.log(this.state.msg);
    })
    console.log(this.state.msg);
  }

注意setState的一個問題：setState是異步的

// setState方法執行更新state的時候，是一個異步的操做，不可以直接獲取到最新的state值
    // setState方法容許咱們傳入一個回調函數，在回調函數中可以獲取到最新的state
    this.setState({
      msg: e.target.value
    }, function(){
       console.log(this.state.msg);
    })
    console.log(this.state.msg);

發表評論案例

擴展

Context：上下文環境

用於父組件向子組件傳遞數據

使用步驟：

在父組件中調用getChildContext方法獲取子組件上下文並返回數據：

// 給全部的子組件去共享數據使用context
  getChildContext(){
    return {
      color: this.state.color
    }
  }

在父組件中使用childContextTypes對數據進行校驗：

// 給子組件經過Context共享數據，必需要進行類型驗證
  // 使用下面的方式：  驗證須要安裝  prop-types
  static childContextTypes = {
    color: PropTypes.string
  }

在子組件中使用contextTypes對數據進行校驗：

// 子組件想要接收父組件經過COntext傳遞的數據，還要進行類型驗證
  static contextTypes = {
    color: PropTypes.string
  }

類型校驗

移動App第5天-豆瓣電影

複習

瞭解組件生命週期的三個階段
- 組件的建立階段：全部的方法只執行一次，
  - 初始化屬性props：static defaultProps = {}
  - 初始化state：在構造函數中經過 this.state = {}
  - 使用setState方法：
    - willMount
    - didMount
- 組件的運行階段：執行0-N次
  - 使用setState：willReceiveProps
- 組件的銷燬階段：執行1次
掌握defaultProps和propTypes的使用
掌握React提供的事件綁定機制
- 第一種：獲取原生的DOM對象，使用原生方式進行事件綁定
- 第二種：JSX語法屬性綁定 onClick
掌握ref的形式獲取元素
- 在JSX語法的標籤上，設置ref屬性
- this.refs.屬性值
瞭解綁定this並傳參的三種方式
- call apply bind
- 使用bind方法，在事件中綁定this並傳參方法名.bind(this, '','')
- 在構造函數中綁定this，構造函數裏：方法名 = 方法名稱.bind(this,'','')
- 使用箭頭函數：拉姆達表達式，lambda就是箭頭函數
掌握表單控件配合onChange事件使用
- value={this.state.msg} ，表單變成了受控表單，沒法操做
- onChange = { this.setState({ msg: --------- }) }
父組件向子組件傳值
- 直接使用屬性的方式，屬性擴散的方式進行傳值：this.props
- Context getChildContext(){ return { color:'red' }} static childContextTypes={} 子組件 contextTypes = {} this.context.color
瞭解子組件向父組件傳值
- 能夠經過props的方式傳遞一個方法，方法裏面能夠傳參
- this.props.父組件傳遞過來時使用的屬性名稱()

Node.js設置跨域

app.use('*', function (req, res, next) {
	// 設置請求頭爲容許跨域
    res.header("Access-Control-Allow-Origin", "*");
    // 設置服務器支持的全部頭信息字段
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    // 設置服務器支持的全部跨域請求的方法
    res.header("Access-Control-Allow-Methods", "POST,GET");
    // next()方法表示進入下一個路由
    next();
});

Promise規範

定義：就是一個異步的代碼規範；
好處：

更好的幫咱們解決回調地獄問題
能幫咱們很好的實現代碼的複用

基於Promise規範的fetch API的使用

項目需求分析：

頁面的結構： Ant Design
點擊導航切換顯示內容：使用路由
數據來源：豆瓣電影的API
獲取數據：Ajax fetch
點擊返回返回上一個頁面

項目結構搭建和佈局

實現ANT組件的按需加載

使用react-router-dom實現路由跳轉

HashRouter：是一個路由的跟容器，一個應用程序中，通常只須要惟一的一個HashRouter容器便可！未來，全部的Route和Link都要在HashRouter中進行使用

注意：HashRouter中，只能有惟一的一個子元素

Link：是至關於超連接通常的存在；點擊Link，跳轉到相應的路由頁面！負責進行路由地址的切換！
Route：是路由匹配規則，當路由地址發生切換的時候，就會來匹配這些定義好的Route規則，若是有能匹配到的路由規則，那麼，就會展現當前路由規則所對應的頁面！
Route：除了是一個匹配規則以外，仍是一個佔位符，未來，此Route所匹配到的組件頁面，將會展現到Route所在的這個位置！

// 其中path指定了路由匹配規則，component指定了當前規則所對應的組件
<Route path="" component={}></Route>

注意：react-router中的路由匹配，是進行模糊匹配的！能夠經過Route身上的exact屬性，來表示當前的Route是進行精確匹配的
可使用Redirect實現路由重定向

// 導入路由組件
    import {Route, Link, Redirect} from 'react-router-dom'

    <Redirect to="/movie/in_theaters"></Redirect>

this.prop和Route的關係【重要】

獲取到參數以後，從服務器獲取電影數據

使用Node服務器轉接豆瓣API

渲染電影列表

React第6天

複習：

Promise對象用來解決回調地獄 new Promise
ant design 基於React的前端UI框架
request http請求客戶端
fetch Api fetch(url).then(function( response ){ response.json().then(function(data){ data最終想要的數據 }) })
路由 react-router： BrowserRouter Route Link Redirect

1、配置ReactNative基本開發環境

搭建基本的開發環境 - 英文官網<br/> 搭建基本的開發環境 - 中文這兩篇文檔對比着進行參考，進行相關的安裝；

2、搭建RN的項目

運行react-native init 項目名稱來初始化一個react native項目；
打包運行項目，把打包好的項目部署到手機中！

確保手機已經正確的連接到了當前電腦上，同時手機開啓了開發者調試模式；可使用adb devices來查看當前連接到電腦上的手機設備列表！
當確認手機正確連接到電腦上以後，能夠運行react-native run-android來打包當前項目，並把打包好的項目以調試的模式安裝到手機中！
打包完成以後的截圖
React Package窗口的做用
04.React Packager打包編譯代碼
當第一打包編譯項目部署到手機上以後 - 如何設置開發服務器的地址 ![05.當第一打包編譯項目部署到手機上以後 - 如何設置開發服務器的地址.png](images/05.當第一打包編譯項目部署到手機上以後 - 如何設置開發服務器的地址.png)

3、項目結構介紹以及打包運行的一些注意事項

4、使用樣式

5、基本組件的使用介紹

View：
Text：
TextInput：
Image：

引用本地資源文件，使用require(相對路徑)：

<Image source={require('./images/1.jpg')}></Image>

引用網絡上的資源時候，必須預先指定圖片的寬高：

<Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017332909331100.jpg'}} style={{width:200, height:200}}></Image>

Button：
ActivityIndicator：
ScrollView：用法簡單，只須要把要滾動的內容，放到ScrollView容器中便可實現滾動！
ListView：ListView組件必須的兩個屬性是dataSource和renderRow。dataSource是列表的數據源，而renderRow則逐個解析數據源中的數據，而後返回一個設定好格式的組件來渲染。

// 使用方式：

    // 1. 建立一個ListView的數據源對象，配置對象是一個固定寫法， 做用是爲了實現ListView組件的高效更新
        // 未來，這個數據源對象，會交給ListView去展現，目前，剛建立完畢的數據源，是個空數據源
        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

        this.state = {
      // 調用數據源對象的cloneWithRows方法，將數據交給數據源去保存
      userList: ds.cloneWithRows(['柯南', '毛利', '嬴政', '里斯', '毛多多', '柯南', '毛利', '嬴政', '里斯', '毛多多', '柯南', '毛利', '嬴政', '里斯', '毛多多'])
    }

    <ListView
        dataSource={this.state.userList}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />

6、案例：豆瓣電影列表

電影列表數據：https://api.douban.com/v2/movie/in_theaters
電影詳細數據：https://api.douban.com/v2/movie/subject/26309788

7、安裝路由

運行npm i react-native-router-flux@3.38.0 --save
路由官網：https://github.com/aksonov/react-native-router-flux
路由相關配置：https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md
路由簡單的DEMO：https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

8、路由的一些基本使用方法

9、配置首頁的輪播圖

輪播圖官網：https://github.com/leecade/react-native-swiper?utm_source=tuicool&utm_medium=referral
運行npm i react-native-swiper --save安裝輪播圖組件
導入輪播圖組件import Swiper from 'react-native-swiper';
其中，在Swiper身上，showsPagination={false}是用來控制頁碼的；showsButtons={false}是用來控制左右箭頭顯示與隱藏；height={160}是用來控制輪播圖區域的高度的！
設置輪播圖的樣式：

var styles = StyleSheet.create({
    wrapper: {},
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    image:{
        width:'100%',
        height:'100%'
    }
})

將組件的代碼結構引入到頁面上：

<Swiper style={styles.wrapper} showsButtons={true} height={160} autoplay={true}>
                <View style={styles.slide1}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017410109413000.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide2}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide3}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017441409442800.jpg'}} style={styles.image}></Image>
                </View>
            </Swiper>

首頁輪播圖片URL地址：

圖片地址1：http://www.itcast.cn/images/slidead/BEIJING/2017410109413000.jpg
圖片地址2：http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg
圖片地址3：http://www.itcast.cn/images/slidead/BEIJING/2017441409442800.jpg

10、渲染電影列表數據

11、渲染電影詳情頁面

12、調用攝像頭拍照

react-native-image-picker的github官網

安裝插件

npm install react-native-image-picker@latest --save

修改android/build.gradle文件

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
    }
    ...
}
...

修改android/gradle/wrapper/gradle-wrapper.properties文件

distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

修改android/app/build.gradle

dependencies {
    compile project(':react-native-image-picker')
}

修改AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

修改MainApplication.java

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // <-- add this line
            // OR if you want to customize dialog style
            new ImagePickerPackage(R.style.my_dialog_style)
        );
    }
}

在咱們本身的組件中添加以下代碼：

// 第1步：
import ImagePicker from 'react-native-image-picker'
var photoOptions = {
  //底部彈出框選項
  title: '請選擇',
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: '拍照',
  chooseFromLibraryButtonTitle: '選擇相冊',
  quality: 0.75,
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
}

// 第2步：
constructor(props) {
super(props);
    this.state = {
      imgURL: ''
    }
  }

// 第3步：
<Button title="拍照" onPress={this.cameraAction}></Button>
<Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 }}></Image>

// 第4步：
cameraAction = () => {
ImagePicker.showImagePicker(photoOptions, (response) => {
  console.log('response' + response);
  this.setState({
    imgURL: response.uri
  });
  if (response.didCancel) {
    return
  }
})
  }

必定要退出以前調試的App，並從新運行react-native run-android進行打包部署；此次打包期間會下載一些jar的包，須要耐心等待！

更多相關文章...

相關標籤/搜索

React

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

react_note

移動App第3天

複習

什麼是React

React與vue.js的對比

爲何要學習React

React中幾個核心的概念

React項目的建立

JSX語法

React中：第一種建立組件的方式

第一種基本組件的建立方式

父組件向子組件傳遞數據

將組件封裝到單獨的文件中

React中：第二種建立組件的方式

瞭解ES6中class關鍵字的使用

基於class關鍵字建立組件

兩種建立組件方式的對比

一個小案例，鞏固有狀態組件和無狀態組件的使用

經過for循環生成多個組件

style樣式

總結

相關文章

移動App第4天

複習

組件的生命週期

getDefaultProps

經過Counter計數器的小案例 - 瞭解生命週期函數

組件初始化時生命週期事件總結

經過原生的方式獲取元素並綁定事件

使用React中的事件，綁定count自增

React中使用ref屬性獲取DOM元素引用

組件運行中事件的對比

綁定this並傳參的三種方式

綁定文本框與state中的值

發表評論案例

擴展

Context：上下文環境

相關文章

類型校驗

移動App第5天-豆瓣電影

複習

Node.js設置跨域

Promise規範

基於Promise規範的fetch API的使用

項目需求分析：

項目結構搭建和佈局

實現ANT組件的按需加載

使用react-router-dom實現路由跳轉

this.prop和Route的關係【重要】

獲取到參數以後，從服務器獲取電影數據

使用Node服務器轉接豆瓣API

渲染電影列表

相關文章

React第6天

1、 配置ReactNative基本開發環境

2、 搭建RN的項目

3、 項目結構介紹以及打包運行的一些注意事項

4、 使用樣式

5、 基本組件的使用介紹

6、 案例：豆瓣電影列表

7、 安裝路由

8、 路由的一些基本使用方法

9、 配置首頁的輪播圖

首頁輪播圖片URL地址：

10、 渲染電影列表數據

11、 渲染電影詳情頁面

12、 調用攝像頭拍照

相關文章

1、配置ReactNative基本開發環境

2、搭建RN的項目

3、項目結構介紹以及打包運行的一些注意事項

4、使用樣式

5、基本組件的使用介紹

6、案例：豆瓣電影列表

7、安裝路由

8、路由的一些基本使用方法

9、配置首頁的輪播圖

10、渲染電影列表數據

11、渲染電影詳情頁面

12、調用攝像頭拍照