React Native開發指南(一)
現在React Native很火所以買了本書研究研究。上學那會兒比著教科書上的demo敲程式碼,但是大部分情況都是程式碼和書上長的一模一樣,可死活就是執行不起來。工作之後買的技術書籍情況絲毫沒有改善。嗯,讀一本書如果能把書中所以的例子都跑通,其實也就消化的差不多了。React Native更新很快。當讀這本書的時候,按照書中所述生成出來的東西已經書上有很明顯的差別。這不第一個Demo就被卡了幾下。下面就列一下讀書筆記以及所遇到的問題。內容只覆蓋前三章。
1. 什麼是React Native?開發原生移動應用的JavaScript框架。
2. React Native的原理。用JavaScript通過“橋接”方式呼叫原生渲染介面來實現APP。
3. 常見的跨平臺應用開發方案。
(1)Ionic, Cordorva 採用Web前段開發技術JavaScript,HTML,CSS。用Webview渲染介面。缺點效能不好,模仿終非原生。開發的過程中經常碰到卡頓,閃爍等坑。
(2)React Native 同樣採用Web前段的技術,但用效能好些。用原生UI元件,不在UI主執行緒終執行兼顧靈活性於效能。
4. 如何建立元件,匯入元件
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Image
} from 'react-native';
import Forecast from './Forecast'; //引入自定義的元件,一般我們按功能模組寫一些元件。就醬紫引進來。
//下面就是模組定義了
export default class MyWeather extends Component {
constructor(props) {
......
}
someFunction() {
......
}
......
render() {
}
}
在跑程式的過程中遇到的問題。
1. 關於圖片按照書中描述的那種加法始終不行。最後放棄採用把圖片加入專案目錄引入的方式。
2. 關於fetch請求失敗的問題。注意兩點一個是要找對檔案位置(專案名稱下面的Info.plist eg.MyWeather/Info.plist),再者就是加入的內容。
找到NSAppTransportSecurity相關內容,下面是我本地加之前的內容
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
要加入後的內容
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
<key>openweathermap.org</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
3. 就是關於佈局的問題,比這葫蘆畫瓢調的不是太理想,等研究到佈局樣式再談吧。最後效果圖如下所示,圖片是去上海郊野公園(http://pan.baidu.com/s/1i4IrFlN)拍的。公園還不錯,交通便利也很大。橘子收穫的季節可以去偷橘子^_^。Demo程式碼地址https://github.com/WinfredMa/MyWeather.git