react native用Listview從列表頁跳到詳情頁

唯寫了下功能，樣式沒有寫，大神勿笑。一些需要改進 的地方請大神指點。qq:274501366

話不多說直接上代碼

index.android.js

'use strict';import React, {Component} from 'react';import  {  AppRegistry,  Image,  StyleSheet,  Text,  View,  TouchableHighlight,  ListView,     RefreshControl,} from 'react-native';import {Navigator} from 'react-native-deprecated-custom-components';import detailview from './detailview';import MyProject from './MyProject';class NavigatorDemo extends Component {  render() {    return (      <Navigator        style={styles.container}        initialRoute={{ name: MyProject, component: MyProject  }}        renderScene={ (route, navigator) =>  {                                                        let Component = route.component;                                                        if(route.component){                                                            return <Component {...route.params} navigator={navigator} />                                                        }                                                      }}         configureScene={(route) => {          if (route.sceneConfig) {            return route.sceneConfig;          }          return Navigator.SceneConfigs.FloatFromBottom;        }}      />    );  }}const styles = StyleSheet.create({   container: {    flex: 1,   },   messageText: {    fontSize: 17,    fontWeight: '500',    padding: 15,    marginTop: 50,    marginLeft: 15,  },  button: {    backgroundColor: 'white',    padding: 15,    borderBottomWidth: StyleSheet.hairlineWidth,    borderBottomColor: '#CDCDCD',  },});AppRegistry.registerComponent('testrn', () => NavigatorDemo);

MyProject.js

var REQUEST_URL = 'http://xxx/index.php?r=activity/JsonList&page=';import React, { Component } from 'react';import {  AppRegistry,  Image,  StyleSheet,  Text,  View,   ListView,   RefreshControl,   Navigator,   TouchableHighlight,} from 'react-native'; import detailview from './detailview';let page = 1;let data = [];export default class MyProject extends Component {     constructor(props) {         super(props);         this.state = {             dataSource: new ListView.DataSource({                 rowHasChanged: (row1, row2) => row1 !== row2,             }),             loaded: false,         };     }     componentDidMount(){         this.fetchData();     }     fetchData() {         fetch(REQUEST_URL+this.state.page)             .then((response) => response.json())             .then((responseData) => {             data=responseData.info.data;                 this.setState({                     dataSource: this.state.dataSource.cloneWithRows(responseData.info.data),                     loaded: true,                 });             })             .done();     }reloadWordData() {                return new Promise((resolve) => {                        setTimeout(()=>{resolve()}, 2000)                });        }     render() {         if (!this.state.loaded) {             return this.renderLoadingView();         }         return (             <ListView                refreshControl={                                                        <RefreshControl                                                            refreshing={false}                                                            onRefresh={this.reloadWordData.bind(this)}                                                        />}                 dataSource={this.state.dataSource}                 renderRow={this.renderMovie.bind(this)}                 style={styles.listView}                 onEndReached={this.onEndReached.bind(this)}                  onEndReachedThreshold = { 100 }             />         );     }       onEndReached() {           this.loadMore();       }       loadMore() {       page=page+1;           fetch(REQUEST_URL+page)                        .then((response) => response.json())                        .then((responseData) => {                        data = data.slice().concat(responseData.info.data);                            this.setState({                 dataSource: this.state.dataSource.cloneWithRows(data),                                      loaded: true,               });             })             .done();         }     renderLoadingView()     {         return (<View style={styles.container} >                 <Text>Loading ......</Text>             </View>         );     }_pressRow(rowID: number){                                   this.props.navigator.push({                                     component:detailview,                                     params:{                                              item:rowID,                                             }                                   })                                 }     renderMovie(movie) {         return (         <TouchableHighlight onPress={() => this._pressRow(movie.id)}>             <View style={styles.container}>                 <Image                     source={{uri: movie.image}}                     style={styles.thumbnail}                 />                 <View style={styles.rightContainer}>                     <Text style={styles.title}>{movie.title}</Text>                     <Text style={styles._create_time}>{movie._create_time}</Text>                 </View>             </View>         </TouchableHighlight>         );     }}const styles = StyleSheet.create({  container: {    flex: 1,    flexDirection: 'row',    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',    marginBottom: 10,  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },    thumbnail: {    width: 81,    height: 53,    marginLeft:30,  },    rightContainer: {    flex: 1,  },  title: {    fontSize: 20,    marginBottom: 8,    textAlign: 'center',  },  _create_time: {    textAlign: 'center',  },       listView: {         paddingTop: 20,         backgroundColor: '#F5FCFF',     },});//AppRegistry.registerComponent('testrn', () => MyProject);

detailview.js

var REQUEST_URL = 'http://xxxxx/index.php?r=activity/JsonFindOne&id=';import React, { Component } from 'react';import {  AppRegistry,  Image,  StyleSheet,  Text,  View,   ListView,   RefreshControl,   navigator,   TouchableHighlight,} from 'react-native';export default class detailview extends Component{constructor(props){  super(props); this.state = {    id:this.props.item,    detail:null,          };  }componentDidMount(){//  this.setState({//      id:this.props.item,//  });  this.fetchData();}fetchData() {         fetch(REQUEST_URL+this.state.id)             .then((response) => response.json())             .then((responseData) => {             data=responseData.info;             //alert(responseData.info);return false;                 this.setState({                     detail: responseData.info,                 });             })             .done();     }_pressBack(){  const{navigator} = this.props;  if(navigator){    navigator.pop();  }}  render(){  if (!this.state.detail) {        return this.renderLoadingView();      }    return this.renderdetail(this.state.detail);    }    renderLoadingView() {        return (          <View >            <Text>              Loading movies...            </Text>          </View>        );      }      renderdetail(detail) {          return (             <View >                    <View>                      <TouchableHighlight onPress={this._pressBack.bind(this)} style={{margin:20}}>                          <Text>返回</Text>                      </TouchableHighlight>                    </View>                    <Text>detail</Text>                    <Text>id=={detail.id}</Text>                    <Text>title=={detail.title}</Text>                    <Text>content=={detail.content}</Text>                  </View>          );        }}

好了，不能運行可以聯絡我。同時也希望大神可以指點