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

成功运行界面

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

完整代码如下:

/**
 * 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/

上一篇:springboot 异步调用Async使用方法


下一篇:Flexible 弹性盒子模型之flex