React Native 0 20官方入門教程

2021-09-19 11:00:40 字數 2206 閱讀 9862

安裝必要的依賴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系列 研究原始碼也是乙個很好的學習方式...