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

文章很短，但我快点更新
再见