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',borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#CDCDCD',});

AppRegistry.registerComponent('testrn',() => NavigatorDemo);

var REQUEST_URL = 'http://xxx/index.php?r=activity/JsonList&page=';
import React,{ Component } from 'react';
import {
  AppRegistry,Navigator,} 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),});
             })
             .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,_create_time: {
    textAlign: 'center',listView: {
         paddingTop: 20,});

//AppRegistry.registerComponent('testrn',() => MyProject);

var REQUEST_URL = 'http://xxxxx/index.php?r=activity/JsonFindOne&id=';
import React,navigator,} 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>
          );
        }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!