只写了下功能,样式没有写,大神勿笑。一些需要改进 的地方请大神指点。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);
MyProject.js
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);
detailview.js
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> ); } }好了,不能运行可以联系我。同时也希望大神可以指点 原文链接:https://www.f2er.com/react/302838.html