React native using a ListView to jump from the list page to the details page

Only write the next function, the style is not written, the great God do not laugh. Some need to improve the place to ask the great God guidance. qq:274501366

Not much to say directly on the code

Index.android.js

' Use strict ';
Import React, {Component} from ' React '; Import {appregistry, Image, StyleSheet, Text, View, Touchablehighlight, ListView, Refreshcontrol,} f
Rom ' 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 {... r
                                                      Oute.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, Fontweig HT: ' $ ', padding:15, margintop:50, Marginleft:15,}, button: {backgroundcolor: ' White ', padd

Ing: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, Touchableh
 Ighlight,} 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 (() =>{resol
        ve ()}, 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.ren Dermovie.bind (This)} Style={styles.listview} onendreached={this.onendreached. bind (This)} Onendreachedthreshold = {+}/>);

       } onendreached () {this.loadmore ();
           } loadmore () {page=page+1; Fetch (Request_url+page) then ((response) = Response.json ()). Then (res
                            Ponsedata) = {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>lo
     Ading ......</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.rightconta Iner}> <text style={styles.title}>{movie.title}</text> <text s
         Tyle={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,}, we Lcome: {fontsize:20, textAlign: ' Center ', Margin:10,}, instructions: {textAlign: ' Center ', CO Lor: ' #333333 ', Marginbottom:5,}, thumbnail: {width:81, height:53, Marginleft:30,}, Righ Tcontainer: {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, Touchableh
Ighlight,} 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}}> & Lt
                    Text> back </Text> </TouchableHighlight> </View> <Text>detail</Text> <Text>id=={detail.id}</Text> &lt ;
                  Text>title=={detail.title}</text> <Text>content=={detail.content}</Text>
 </View>);       }
} 

OK, can't run can contact me. At the same time, I hope the great God can enlighten