ReactNative新手学习之路02第一个RN项目

开始第一个RN项目（iOS版）我的电影列表0.1版，后面做列表版

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);

总结：本章学习了知识点

1. image图片组件使用，必须指定宽度
2. Text组件点使用
3. 样式文件
4. json数据绑定
5. 注册组件Image
6. Run Reload修改的代码

百度云盘 02第一个RN项目

React Native 技术交流群127482131,欢迎大家一起来学习RN。

转载请保留文章链接 http://www.reactnative.pw/