安裝必要的依賴watchman
cd watchman-4.5.0
./autogen.sh
./configure --prefix=/usr/local/cellar/watchman/2.9.8 --with-pcre
make
make install
安裝rect native開發工具
npm install -g react-native-cli
此時通過修改index.ios.js 執行⌘+r檢視檢視變化
通常在index.ios.js或index.android.js 頂部增加
var mocked_movies_data = [修改**,增加image元件支援},];
import react, from 'react-native';
修改render
render()
);}
更新樣式**
const styles = stylesheet.create(,
thumbnail:
});
xcode中⌘+r重新載入,即看到檢視已載入我們的模擬資料。
使用flexbox布局
改變結構**
render()
);}
更新樣式
const styles = stylesheet.create(,
rightcontainer: ,
title: ,
year: ,
thumbnail:
});
新增api資料位址
var request_url = '';
完整**
'use strict';
import react, from 'react-native';
var request_url = '';
class facemash extends component ;
} componentdidmount()
fetchdata());
}).done();
} render()
var movie = this.state.movies[0];
return this.rendermovie(movie);
} renderloadin**iew()
rendermovie(movie)
);}}
const styles = stylesheet.create(,
rightcontainer: ,
title: ,
year: ,
thumbnail:
});
/*** */'use strict';
import react, from 'react-native';
var api_key='7waqfqbprs7pajbz28mqf6vz';
var api_url = '';
var page_size = 25;
var params = '?apikey='+api_key+'&page_limit='+page_size;
var request_url = api_url+params;
class facemash extends component ),
loaded: false,
};}
componentdidmount()
fetchdata());
}).done();
} render()
return (
);}
renderloadin**iew()
rendermovie(movie)
);}}
const styles = stylesheet.create(,
listview: ,
rightcontainer: ,
title: ,
year: ,
thumbnail:
});
react native上手體驗
目前放出來的是ios版本,後續還會放出android版本,在加上之前的reactjs,那乙份 搞定三個平台並非不可能,於是我也下了個react native來體驗一把。react native目前只放出了ios版本,那為了體驗,你必須有os x系統,並且安裝了xcode.另外官方推薦使用homebr...
react native學習資源
這是我覺得比較有用的學習資源 要多練習多理解 一 1.react native 官方api文件 2.react native中文文件 3.react native通訊機制詳解 4.react native布局篇 5.react native基礎指南 一 6.react native基礎指南 二 7....
React Native學習 起步
時間 2015 04 11 10 32 49 w3ctech 原文 主題react 本指南匯集react native各類學習資源,給大家提供便利。指南正在不斷的更新,大家有好的資源歡迎pull requests!同時還有awesome react native系列 研究原始碼也是乙個很好的學習方式...