安裝

• 要按官方文件操作，不要瞎百度，瞎按部落格操作
• 使用（react-native init 你的專案名字 –version 0.44.3 ）生成對應版本的專案，不同版本有差異，初學者容易掉某明奇妙的坑裡，選擇你手裡教程對應的版本，拿官方文件做教程的選擇beta版本，不要選測試版本，不要選測試版本，不要選測試版本
• 專案目錄下執行命令 react-native run-ios （或者 react-native run-android ）

專案結構

• 新建資料夾作為專案程式碼的存放資料夾，一般叫src（在專案的跟目錄下，是專案的根目錄，不是專案所在資料夾的根目錄，如果你不懂什麼叫專案的跟目錄，記得和node_modules平級就行）
• 新建資料夾用於存放公共圖片。支援[email protected]和[email protected]尾綴，會自動適應。圖片引用檔名不需要加[email protected],比如[email protected]只需要寫ic_photo.png就行

引用路徑

• ./是當前平級目錄，通過這個引用可以找你的兄弟。
• ../是向上一級目錄，也就是當前路徑的父級目錄。通過這個引用可以找你的叔叔們。一個../只代表向上跳一級，要找爺爺級請加兩個，也就是../../，以此類推

匯入元件

• 元件或者變數以及方法要想被其他檔案引用必須匯出 。也就是在宣告前面加上export
• 多個匯出可以用

module.exports = {
    某元件名,
    某變數名,
    某方法名,
}

• export default 用作匯出修飾的使用時可以不需要引用，每個檔案只能有一個預設匯出的物件。
• js裡面萬事萬物皆是物件，是所有，是所有，是所有。不管是方法還是變數還是字串還是元件。

JSON

js裡面json文字就是個物件。不需要賦值不需要解析可以直接當做物件用
例如

var options = {
        url: '/util/car/car_price',
        method: 'POST',
        data: `prov=${prov}
 
&city=${city}&model=${modelID}`,
    }

就可以直接用

options.method 

來操作他的屬性method
所以你要宣告陣列可以直接寫一個數組的JSONARRAY變數
如

var list= [
        '年利率', '月利率', '月供'
    ]

這裡的list就是陣列物件，而不是字串，要宣告字串請在兩端加上引號或者雙引號

所以網路請求返回過來的如果是json格式也是可以直接當做物件操作，不需要額外解析。哦，就是物件，不需要當做。

介面跳轉與傳值

• 跳轉
  RN本質上是js。也就是前端那一套，沒有原生介面跳轉的概念，所有的介面跳轉本質上就是元件的替換。為了達到與原生一致的介面切換體驗，跳轉必須要藉助Navigator，Navigator可疊加使用，必須在跳轉前提前靜態宣告

const AppNavigator = StackNavigator({
    Main: {screen: Main},
    CarModelSelect: {
        screen: CarModelSelect,
    },
    CityView: {
        screen: CityView,
    },
    ResultView: {
        screen: ResultView,
    },
});

跳轉時呼叫

    this.props.navigation('CarModelSelect')

程式碼主動返回上一個介面呼叫

 this.props.navigation.goBack()

這裡的navigation就是控制跳轉的Navigator的物件，感興趣的同學可以打印出來觀察。js可以直接列印物件，console.debug(物件) 就可以

• 傳值

 this.props.navigation()

物件方法的第一個引數就是要跳轉介面的路由路徑，第二個引數就是需要傳遞的值物件

this.props.navigation('CarModelSelect', {title:"標題"
                        modelSelect: ( name) => {

                        }
                    })

上面這段程式碼演示了傳遞title這個欄位和modelSelect（name）這個方法的傳遞。前面說了。js裡啥都是物件，所以方法自然也是物件。也可以當做值直接傳遞過去，所以介面之間的方法回撥大家應該知道怎麼使用了

• 取值

var title = this.props.navigation.state.params.title
 this.props.navigation.state.params.modelSelect("小明")

上面程式碼演示瞭如何取得之前介面傳遞過來的title值和如何呼叫回撥方法modelSelect(name)

• 當前介面繼續跳轉其他介面
  同樣的呼叫

    this.props.navigation('另一個介面的路由路徑')

this.state

介面上的一切現實變化都需要通過this.state來控制。this.state裡的值改變了自然會重新整理與他繫結的介面屬性（文字，位置，高寬，動畫等）

• this.setState();
  setState不是立即執行的，延遲更新的原因在於—state是非同步執行的，只有render發生變化的時候才觸發this.setState()

列表

• SectionList與FlatList所需要的資料來源的格式是必須的。也就是必須要有key與data欄位。當然可以通過

  keyExtractor={(item, index) => item.city_name}

方法來指定key。但是沒有方法來指定data，由於這個奇葩的設計。大部分實際情況下需要手動格式化你的資料來源成[“key”:”key”,”data”:[]]的格式

• getItemLayout可以計算列表高度。推薦實現此方法，實際使用中你不實現列表載入的效能差的爆表，經常不忍直視。
• 分隔線 ItemSeparatorComponent可以用來做垂直分隔線。不能用來做水平分隔線，所以多列的情況你可以指定每個item的左邊距然後給列表加個paddingRight來實現水平分割線。（coder的智慧是無限滴）

有什麼建議的可以留言喔

如果我的部落格對您有幫助，請留言鼓勵下或者點個贊吧！