React-native學習過程 一 改變文字，新增圖片

react-native 我這裡是在Window的環境上做實驗，並且是以android的方向寫的，請注意。
還有就是結尾會貼出完整程式碼
首先我們需要編輯index.android.js檔案，至於用什麼網頁編輯軟體沒有要求。
新增文字
首先建立一個陣列儲存資料，這個陣列放在最上面

var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://img5.imgtn.bdimg.com/it/u=4080105893,4096129906&fm=206&gp=0.jpg/'}},
];

在impot裡新增Image元素

import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View
} from 'react-native';

改變渲染函式

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

新增圖片樣式

 thumbnail: {
    width: 53,
    height: 81,
  }

使用命令react-native run-android或者Reload js檢視結果
完整程式碼如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://img5.imgtn.bdimg.com/it/u=4080105893,4096129906&fm=206&gp=0.jpg/'}},
];
import React, { Component } from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class MyProject 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',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
    thumbnail: {
    width: 53,
    height: 81,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

文章很短，但我快點更新
再見