前段時間接觸了一點(diǎn)RN的開發(fā)浩嫌，總結(jié)了以下的一些問題以及解決方法
AppRegistry.registerComponent('projectName', () => componentName); 一般只會用到一次, projectName 必須和文件夾名字一樣.
在iOS上使用http鏈接的圖片地址可能不會顯示，解決方案:https://segmentfault.com/a/1190000002933776
圖片如果使用網(wǎng)絡(luò)地址的話，source有固定的格式，資源屬性是一個對象，而且必須指定寬高
<Image source={{'uri': 'https://xxxxx'}} style={{width:193, height: 110}} />
-
引入本地圖片的一些注意點(diǎn)
使用本地圖片，直接require
require中的圖片名字必須是一個靜態(tài)字符串，不能是一個變量或者表達(dá)式
與網(wǎng)絡(luò)圖片相比煤率，Packager可以得知圖片大小了，不需要在代碼里再聲明一遍尺寸
如果有banana.ios.jpg和banana.android.jpg乏冀，Packager就會根據(jù)平臺而選擇不同的文件
倍圖蝶糯，可以使用@2x，@3x這樣的文件名后綴辆沦，來為不同的屏幕精度提供圖片
<Image source={require('./images/banana.jpg')} />
- StyleSheet.create 用來定義組件的樣式
<Text style={styles.red}>red text</Text>
<Text style={styles.green}>green text</Text>
const styles = StyleSheet.create({
red: {
fontSize: 40
},
green: {
color: 'green'
}
})
注意要使用駝峰寫法
-
尺寸（寬度和高度）：React Native中的尺寸都是無單位的昼捍，表示的是與設(shè)備像素密度無關(guān)的邏輯像素點(diǎn)。
<View style={{width: 100, height: 100, backgroundColor: 'blue'}}></View> flexbox (有個區(qū)別众辨，flexDirection的默認(rèn)方向是 column)
處理文本輸入 組件：TextInput 事件： onChangeText
背景圖的實現(xiàn)(通過嵌套來實現(xiàn)),不存在 backgroundImage
<Image source={...}>
<Text>Inside code</Text>
</Image>
ios 圓角的不好處理 : 不要裸用Image標(biāo)簽端三，在外面套一層<View>，讓borderRadius作用在View標(biāo)簽
ScrollView 一個通用的可滾動的容器鹃彻，可以垂直也可以水平滾動（通過horizontal屬性來設(shè)置） --- 適合用來顯示數(shù)量不多的滾動元素
FlatList 用于顯示一個垂直的滾動列表郊闯，其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同，更適于長列表數(shù)據(jù)，且元素個數(shù)可以增刪团赁，F(xiàn)latList并不立即渲染所有元素育拨，而是優(yōu)先渲染屏幕上可見的元素。FlatList組件必須的兩個屬性是data和renderItem欢摄。data是列表的數(shù)據(jù)源熬丧，而renderItem則從數(shù)據(jù)源中逐個解析數(shù)據(jù)，然后返回一個設(shè)定好格式的組件來渲染怀挠。
網(wǎng)絡(luò)請求 => Fetch 應(yīng)用中訪問任何網(wǎng)站不會出現(xiàn)跨域析蝴，還可以使用ES7的async/await ， 或者使用其他第三方庫
async getMoviesFromApi() {
try { // 注意這里的await語句绿淋，其所在的函數(shù)必須有async關(guān)鍵字聲明
let response = await fetch('https://facebook.github.io/react-native/movies.json');
let responseJson = await response.json();
return responseJson.movies;
} catch(error) {
console.error(error);
}
}
class xxx extends Component {} 這種方式必須this.eventName.bind(this)這種方法來正確的綁定this,或者方法直接寫成箭頭函數(shù)闷畸，就可以直接用 this.eventName 調(diào)用
字符串new Date()會有問題，NaN吞滞，最好讓后端直接返回時間戳
更改手機(jī)statusbar的顏色
有時候需要做沉浸式的頭圖佑菩，這時候如果ios的statusbar內(nèi)容顏色為黑色時，則看不到statusbar了裁赠，這時候就需要設(shè)置一下
import { StatusBar } from 'react-native'
render() {
StatusBar.setBarStyle('light-content', true);
}
- 處理證書異常殿漠，攔截ssl請求錯誤q
@Override
public void onReceivedSslError(WebView view,SslErrorHandler handler, SslError error) {
// handler.proceed(); 接受證書
super.onReceivedSslError(view, handler, error);
mFail = true;
showFail();
String msg = "您訪問的頁面SSL證書異常";
mLoadingView.statusToFail(msg);
}
-
RN與H5 postMessage 重復(fù)的問題，解決方案：
const patchPostMessageJsCode = `(${String(function() { var originalPostMessage = window.postMessage var patchedPostMessage = function(message, targetOrigin, transfer) { originalPostMessage(message, targetOrigin, transfer) } patchedPostMessage.toString = function() { return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage') } window.postMessage = patchedPostMessage })})();` injectedJavaScript={patchPostMessageJsCode} react-native run-android 報錯
cd android/
vim local.properties
寫入以下內(nèi)容:
sdk.dir = /Users/USERNAME/Library/Android/sdk
or
vim ~/.zshrc
export ANDROID_HOME=/Users/guest/Library/Android/sdk
本文首發(fā)于 : http://ghost.omeme.me/2017/07/22/react-native-kai-fa-zhong-peng-dao-de-wen-ti-zong-jie/
