开始第一个RN项目(iOS版)我的电影列表0.1版,后面做列表版
- 打开上一节项目 index.ios.js,android打开index.android.js。我这里使用的是Atom编辑器,你也可以使用Sublime等任意文本编辑器。电影显示需要用到图片和文本,渲染缩略图需要用到Image组件,所以把Image添加到对React的import列表中。
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
准备电影数据,我们这里使用json
var MOCKED_MOVIES_DATA = [
{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
修改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}} />
</View>
);
}
由于没有加样式此时运行图片不会出来,这里我们要注意,图片一定要指定宽高才能显示出来。下面我来加入样式,删除原来样式替换如下样式:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
});
修改Render中图片加入新添加的样式。
<Image source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail} />
ps:iOS右键菜单选择reload重新加载修改内容。 Hardware/Shake GesTure
成功运行界面
完整代码如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
var MOCKED_MOVIES_DATA = [
{title: '标题', year: '2016', posters: {thumbnail: 'https://img1.doubanio.com/view/photo/thumb/public/p2324130709.jpg'}},
];
class AwesomeProject extends Component {
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,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
总结:本章学习了知识点
- image图片组件使用,必须指定宽度
- Text组件点使用
- 样式文件
- json数据绑定
- 注册组件Image
- Run Reload修改的代码
百度云盘 02第一个RN项目
React Native 技术交流群127482131,欢迎大家一起来学习RN。
转载请保留文章链接 http://www.reactnative.pw/