前面我们使用react-native init创建了一个项目,这是一个简单的Hello World App(项目结构如下图)。对于iOS来说,你需要编辑index.ios.js来改变App;对于Android,你需要编辑index.android.js来修改App。然后摇晃菜单中点击Road JS查看改变。下面我们就以Android为例子来尝试修改了App。
index.android.js文件:
//Mock数据 var MOCKED_MOVIES_DATA = [ {title: 'Title',year: '2015',posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},]; //导入React-Native相关组件 import React,{ AppRegistry,Component,Image,StyleSheet,Text,View,} from 'react-native'; //创建AwesomeProject组件类 class AwesomeProject extends Component { //使用Mock数据,通过Html渲染组件 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> ); } } //渲染组件的样式 var styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},thumbnail: { width: 53,height: 81,}); //注册创建的AwesomeProject组件类 AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
二、重新加载js
三、添加一些样式
1.index.android.js文件:
var MOCKED_MOVIES_DATA = [ {title: 'Title',]; import React,{ ... ... } from 'react-native'; class AwesomeProject extends Component { 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> ); } } var styles = StyleSheet.create({ container: { flex: 1,//横向排列 flexDirection: 'row',//渲染剩余空间 rightContainer: { flex: 1,//添加title和year展示样式 title: { fontSize: 20,marginBottom: 8,textAlign: 'center',year: { textAlign: 'center',}); AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
2.重新加载JS,展示如下:
四、获取真实数据
下面我们从Rotem Tomatoes.s的API获取数据,用于React-Native展示:
//获取远程真实数据的URL var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; import React,{ ... ... } from 'react-native'; class AwesomeProject extends Component { //构造函数,初始化movies为null constructor(props) { super(props); this.state = { movies: null,}; } //组件在加载到虚拟DOM的时候,请求API数据 componentDidMount() { this.fetchData(); } //请求API数据 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> ); } } var styles = StyleSheet.create({ ... ... }); AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);
2.重新加载JS,显示如下:
五、列表展示
我们尝试把API中请求返回的所有数据,用ListView展示出来;
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; import React,{ ... ... //引入列表控件 ListView,... ... } from 'react-native'; class AwesomeProject extends Component { constructor(props) { super(props); //初始化列表数据源dataSource 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({ //请求API返回的电影数据作为列表的数据源 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}/> ); } renderLoadingView() { ... ... } renderMovie(movie) { return ( ... ... ); } } var styles = StyleSheet.create({ ... ... //列表展示样式 listView: { paddingTop: 20,() => AwesomeProject);
2.重新加载JS,显示如下: