首页 > 本机自动生成的代码能执行,但用网上的代码就不行

本机自动生成的代码能执行,但用网上的代码就不行

实际说明:
我本机的index.ios.js代码如下

/**

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

class AwesomeProject extends Component {
render() {
let MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://e.jikexueyuan.com/headerandfooter/images/logo.png'}},
];
let movie = MOCKED_MOVIES_DATA[0];
let mo='http://e.jikexueyuan.com/headerandfooter/images/logo.png';
let REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
return (
<View style={styles.container}>
<Image
source={{uri:movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<Text style={styles.welcome}>
世界你好-Hello World!{movie.year}
</Text>
</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: 113,
height: 41,
},
});

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

但网上例子为以下

/**

Sample React Native App
https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');

var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
} = React;

var AppRegistry = React.AppRegistry;
var request_url = "https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json";
var HelloWorld = React.createClass({
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
}
},
componentDidMount: function() {
// fetch Data
fetch(request_url)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true
});
})
.done();
},
render: function() {
if (this.state.loaded) {
return this.renderList();
} else {
return this.renderLoadingView();
}
},
renderList: function() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderItem}
/>
)
},
renderItem: function(movie) {
// var mockData = {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}};
return (
<View style={styles.container}>
<Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail}/>
<View style={styles.rightContainer}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
</View>
</View>
);
},
renderLoadingView: function() {
return (
<View style={styles.container}>
<Text>Loading ,please wait!</Text>
</View>
)
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f5fcff'
},
rightContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
thumbnail: {
width: 53,
height: 81
}
});

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

问,我如何用试例代码,问一下这两个代码的区别是什么?代码书写格式就不同,哪位老大给讲解一下,感谢!!!

【热门文章】
【热门文章】