React Native 0.20官方入门教程
发布时间:2020-12-15 04:39:06 所属栏目:百科 来源:网络整理
导读:最近对React Native比较有兴趣,简单把官网的入门例子做了一下,发现了很多坑,特别是watchman版本过低的问题,导致总是运行不起来。所以 这里特别下载了最新的watchman,进行了源码编译。希望本文对刚学习的新人有用。 安装Rect Native 安装必要的依赖watch
最近对React Native比较有兴趣,简单把官网的入门例子做了一下,发现了很多坑,特别是watchman版本过低的问题,导致总是运行不起来。所以 这里特别下载了最新的watchman,进行了源码编译。希望本文对刚学习的新人有用。 安装Rect Native安装必要的依赖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 react-native init <APP_NAME> IOS版本的项目文件用XCODE打开<APP_NAME>/ios/<APP_NAME>.xcodeproj,运行?+R即可 此时通过修改index.ios.js 运行?+R查看视图变化 模拟数据通常在index.ios.js或index.android.js 顶部增加 var MOCKED_MOVIES_DATA = [ {title: 'Title',year: '2015',posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},]; 修改代码,增加Image组件支持 import React,{ AppRegistry,Component,Image,StyleSheet,Text,View } from 'react-native'; 修改render render() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> </View> ); } 更新样式代码 const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: { width: 53,height: 81,} }); Xcode中?+R重新载入,即看到视图已载入我们的模拟数据。 重新布局使用FlexBox布局 render() { var movie = MOCKED_MOVIES_DATA[0]; return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); } 更新样式 const styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',rightContainer: { flex: 1,title: { fontSize: 20,marginBottom: 8,textAlign: 'center',year: { textAlign: 'center',} }); 获取真实的数据添加API数据地址 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; 完整代码 'use strict'; import React,View } from 'react-native'; var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; class FaceMash extends Component { constructor(props){ super(props); this.state = { movies: null,}; } componentDidMount(){ this.fetchData(); } fetchData(){ fetch(REQUEST_URL) .then((response)=>response.json()) .then((responseData)=>{ this.setState({ movies: responseData.movies,}); }) .done(); } render() { if(!this.state.movies){ return this.renderLoadingView(); } var movie = this.state.movies[0]; return this.renderMovie(movie); } renderLoadingView(){ return ( <View style={styles.container}> <Text> Loading movies... </Text> </View> ); } renderMovie(movie){ return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,} }); AppRegistry.registerComponent('FaceMash',() => FaceMash); 显示列表/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React,ListView,View } from 'react-native'; var API_KEY='7waqfqbprs7pajbz28mqf6vz'; var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; var PAGE_SIZE = 25; var PARAMS = '?apikey='+API_KEY+'&page_limit='+PAGE_SIZE; var REQUEST_URL = API_URL+PARAMS; class FaceMash extends Component { constructor(props){ super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1,row2) => row1 !== row2,}),loaded: false,}; } componentDidMount(){ this.fetchData(); } fetchData(){ fetch(REQUEST_URL) .then((response)=>response.json()) .then((responseData)=>{ this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies),loaded: true,}); }) .done(); } render() { if(!this.state.loaded){ return this.renderLoadingView(); } return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView}> </ListView> ); } renderLoadingView(){ return ( <View style={styles.container}> <Text> Loading movies... </Text> </View> ); } renderMovie(movie){ return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,listView: { paddingTop: 20,() => FaceMash); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读