React Native 0.20官方入门教程

前端之家收集整理的这篇文章主要介绍了React Native 0.20官方入门教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近对React Native比较有兴趣,简单把官网的入门例子做了一下,发现了很多坑,特别是watchman版本过低的问题,导致总是运行不起来。所以 这里特别下载了最新的watchman,进行了源码编译。希望本文对刚学习的新人有用。

安装Rect Native

安装必要的依赖watchman

  1. cd watchman-4.5.0
  2. ./autogen.sh
  3. ./configure --prefix=/usr/local/Cellar/watchman/2.9.8 --with-pcre
  4. make
  5. make install

安装Rect Native开发工具

  1. npm install -g react-native-cli
  2. react-native init <APP_NAME>

IOS版本的项目文件用XCODE打开<APP_NAME>/ios/<APP_NAME>.xcodeproj,运行⌘+R即可

此时通过修改index.ios.js 运行⌘+R查看视图变化

模拟数据

通常在index.ios.js或index.android.js 顶部增加

  1. var MOCKED_MOVIES_DATA = [
  2. {title: 'Title',year: '2015',posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},];

修改代码,增加Image组件支持

  1. import React,{
  2. AppRegistry,Component,Image,StyleSheet,Text,View
  3. } from 'react-native';

修改render

  1. render() {
  2. var movie = MOCKED_MOVIES_DATA[0];
  3. return (
  4. <View style={styles.container}>
  5. <Text>{movie.title}</Text>
  6. <Text>{movie.year}</Text>
  7. <Image
  8. source={{uri: movie.posters.thumbnail}}
  9. style={styles.thumbnail} />
  10. </View>
  11. );
  12. }

更新样式代码

  1. const styles = StyleSheet.create({
  2. container: {
  3. flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: {
  4. width: 53,height: 81,}
  5. });

Xcode中⌘+R重新载入,即看到视图已载入我们的模拟数据。

重新布局

使用FlexBox布局
改变结构代码

  1. render() {
  2. var movie = MOCKED_MOVIES_DATA[0];
  3. return (
  4. <View style={styles.container}>
  5. <Image
  6. source={{uri: movie.posters.thumbnail}}
  7. style={styles.thumbnail} />
  8. <View style={styles.rightContainer}>
  9. <Text style={styles.title}>{movie.title}</Text>
  10. <Text style={styles.year}>{movie.year}</Text>
  11. </View>
  12. </View>
  13. );
  14. }

更新样式

  1. const styles = StyleSheet.create({
  2. container: {
  3. flex: 1,flexDirection: 'row',rightContainer: {
  4. flex: 1,title: {
  5. fontSize: 20,marginBottom: 8,textAlign: 'center',year: {
  6. textAlign: 'center',}
  7. });

获取真实的数据

添加API数据地址

  1. var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

完整代码

  1. 'use strict';
  2.  
  3. import React,View
  4. } from 'react-native';
  5.  
  6. var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
  7.  
  8. class FaceMash extends Component {
  9. constructor(props){
  10. super(props);
  11. this.state = {
  12. movies: null,};
  13. }
  14. componentDidMount(){
  15. this.fetchData();
  16. }
  17. fetchData(){
  18. fetch(REQUEST_URL)
  19. .then((response)=>response.json())
  20. .then((responseData)=>{
  21. this.setState({
  22. movies: responseData.movies,});
  23. })
  24. .done();
  25. }
  26. render() {
  27. if(!this.state.movies){
  28. return this.renderLoadingView();
  29. }
  30. var movie = this.state.movies[0];
  31. return this.renderMovie(movie);
  32. }
  33. renderLoadingView(){
  34. return (
  35. <View style={styles.container}>
  36. <Text>
  37. Loading movies...
  38. </Text>
  39. </View>
  40. );
  41. }
  42. renderMovie(movie){
  43. return (
  44. <View style={styles.container}>
  45. <Image
  46. source={{uri: movie.posters.thumbnail}}
  47. style={styles.thumbnail} />
  48. <View style={styles.rightContainer}>
  49. <Text style={styles.title}>{movie.title}</Text>
  50. <Text style={styles.year}>{movie.year}</Text>
  51. </View>
  52. </View>
  53. );
  54. }
  55. }
  56.  
  57. const styles = StyleSheet.create({
  58. container: {
  59. flex: 1,}
  60. });
  61.  
  62. AppRegistry.registerComponent('FaceMash',() => FaceMash);

显示列表

  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. */
  5. 'use strict';
  6.  
  7. import React,ListView,View
  8. } from 'react-native';
  9.  
  10. var API_KEY='7waqfqbprs7pajbz28mqf6vz';
  11. var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
  12. var PAGE_SIZE = 25;
  13. var PARAMS = '?apikey='+API_KEY+'&page_limit='+PAGE_SIZE;
  14. var REQUEST_URL = API_URL+PARAMS;
  15.  
  16. class FaceMash extends Component {
  17. constructor(props){
  18. super(props);
  19. this.state = {
  20. dataSource: new ListView.DataSource({
  21. rowHasChanged: (row1,row2) => row1 !== row2,}),loaded: false,};
  22. }
  23. componentDidMount(){
  24. this.fetchData();
  25. }
  26. fetchData(){
  27. fetch(REQUEST_URL)
  28. .then((response)=>response.json())
  29. .then((responseData)=>{
  30. this.setState({
  31. dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,});
  32. })
  33. .done();
  34. }
  35. render() {
  36. if(!this.state.loaded){
  37. return this.renderLoadingView();
  38. }
  39. return (
  40. <ListView
  41. dataSource={this.state.dataSource}
  42. renderRow={this.renderMovie}
  43. style={styles.listView}>
  44. </ListView>
  45. );
  46. }
  47. renderLoadingView(){
  48. return (
  49. <View style={styles.container}>
  50. <Text>
  51. Loading movies...
  52. </Text>
  53. </View>
  54. );
  55. }
  56. renderMovie(movie){
  57. return (
  58. <View style={styles.container}>
  59. <Image
  60. source={{uri: movie.posters.thumbnail}}
  61. style={styles.thumbnail} />
  62. <View style={styles.rightContainer}>
  63. <Text style={styles.title}>{movie.title}</Text>
  64. <Text style={styles.year}>{movie.year}</Text>
  65. </View>
  66. </View>
  67. );
  68. }
  69. }
  70.  
  71. const styles = StyleSheet.create({
  72. container: {
  73. flex: 1,listView: {
  74. paddingTop: 20,() => FaceMash);

猜你在找的React相关文章