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

好了，不能运行可以联系我。同时也希望大神可以指点