無法在Android設備上運行React-Native示例代碼

對於javaScript和React-Native的新手來說，嘗試創建演示應用程序。該應用程序在Emulator中正常運行。同樣的屏幕截圖如下： Emulator Screenshot 無法在Android設備上運行React-Native示例代碼

雖然如果我嘗試在我的設備上運行應用程序，應用程序無法運行。以下是相同的截圖：

Device Screenshot

請讓我知道如果需要發佈的任何代碼。我試圖尋找上述提到的問題的解決方案，但沒有找到任何

以下是JavaScript代碼：

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
*/ 
'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    Image, 
    ListView, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var API_KEY = '7waqfqbprs7pajbz28mqf6vz'; 
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; 
var PAGE_SIZE = 25; 
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE; 
var REQUEST_URL = API_URL + PARAMS; 




var Button = require('react-native-icon-button'); 
var AwesomeProject = React.createClass({ 
    getInitialState: function() { 
    return { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
     }), 
     loaded: false, 
    }; 
    }, 

    componentDidMount: function() { 
    this.fetchData(); 
    }, 

    fetchData: function() { 
    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.renderLoadingView(); 
    } 

    return (
    <View style={styles.mainLayout}> 
     <Button 
     style={styles.button} 
     onPress={this._handlePress}> 
     color={"white"} 
     iconSize={20} 
     text={"Press me!"} 
     </Button> 
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderMovie} 
     style={styles.listView}/> 
    </View> 

    ); 
    }, 
_handlePress(event){ 
console.log('Pressed'); 
}, 
    renderLoadingView: function() { 
    return (
     <View style={styles.container}> 
     <Text> 
      Loading movies... 
     </Text> 
     </View> 
    ); 
    }, 

    renderMovie: function(movie) { 
    return (
     <View style={styles.container}> 
     <Image 
      source={{uri: movie.posters.thumbnail}} 
      style={styles.thumbnail} 
     /> 
     <View style={styles.rightContainer}> 
      <Text style={styles.title}>{movie.title}</Text> 
      <Text style={styles.year}>{movie.year}</Text> 
     </View> 
     </View> 
    ); 
    }, 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    rightContainer: { 
    flex: 1, 
    }, 
    title: { 
    fontSize: 20, 
    marginBottom: 8, 
    textAlign: 'center', 
    }, 
    year: { 
    textAlign: 'center', 
    }, 
    thumbnail: { 
    width: 53, 
    height: 81, 
    }, 
    listView: { 
    paddingTop: 20, 
    backgroundColor: '#F5FCFF', 
    }, 
    mainLayout:{ 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    button: { 
    padding: 10, 
    borderRadius: 5, 
    backgroundColor: '#272822', 
    color: 'white' 
    }, 
}); 

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

請讓我知道，如果我犯錯誤的任何地方。

來源

2015-10-13 Rajesh Bhagat

可能是這個鏈接將幫助你http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle –

@AliRaza非常感謝。請發佈這個答案，以便我可以接受它。 –