react native用Listview從列表頁跳到詳情頁
阿新 • • 發佈：2018-11-03
只寫了下功能，樣式沒有寫，大神勿笑。一些需要改進 的地方請大神指點。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> ); } }
好了，不能執行可以聯絡我。同時也希望大神可以指點