这次练习使用了react-native中的ListView(列表数据展示)和Navigator(页面导航切换),以下为示例代码:
var React = require('react-native'); var { AppRegistry, View, Navigator, Text, BackAndroid, StyleSheet, ListView } = React; class PAFFNetwork { /** * @method HTTP 请求 * @param options = { * path : '' //http url path * method : '' //http method,默认 GET * params : {} //url query(GET) or body query(POST) * } * @return A Promise( * then : Response JSON Object 中 data 数据 * catch : Request Error 或 Response JSON Object error code 失败的错误 * ) * */ static async request() { return fetch("http://gz-fbtoamc.pingan.com.cn/btoa/portal/account/getBankList ", {method: "GET"}) } } var FeedView = React.createClass({ goBack(){ this.props.navigator.push({name:"default"}); }, render() { return ( <View style={styles.container}> <Text style={styles.welcome} onPress={this.goBack} > I am Feed View! Tab to default view! </Text> </View> ) } }); var WelcomeView = React.createClass({ onPressFeed() { console.log(this.refs); console.log(this.props); // this.setState({ // openStatus: !!!this.state.openStatus, // dataSource: this.state.dataSource.cloneWithRows([{bankName:"test1",bankId:"001"}, {bankName:"test2",bankId:"002"}]) // }); //var getResult = PAFFNetwork.get(); //this.props.navigator.push({name: 'feed'}); }, getInitialState() { var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); return { dataSource: ds.cloneWithRows([{bankName:"test1",bankId:"001"}, {bankName:"test2",bankId:"002"}]), openStatus:0 }; }, componentDidMount() { // var self = this; // var getResult = PAFFNetwork.request(); // getResult.then(function(res){ // return res.json(); // }).then(function(res){ // self.setState({ // dataSource: self.state.dataSource.cloneWithRows(res.data.bankList) // }); // console.log(res); // }) }, renderRow(rowData, s1, rowID) { console.log(arguments); console.log("renderRow...."+this.state.openStatus); return (<Text hidden='true' ref={rowID} onPress={this.onPressFeed}>{rowData.bankName}</Text>); }, render() { console.log("render..."); return ( <View style={styles.container}> <Text style={styles.welcome} onPress={this.onPressFeed} > This is welcome view.Tap to go to feed view. </Text> <ListView ref={'ListView'} dataSource={this.state.dataSource} renderRow={this.renderRow} /> </View> ); } }); var DefaultView = React.createClass({ render(){ return ( <View style={styles.container}> <Text style={styles.welcome}>Default view</Text> </View> ) } }); var SampleApp = React.createClass({ configureScene(route){ return Navigator.SceneConfigs.PushFromRight; }, renderScene(router, navigator){ var Component = null;this._navigator = navigator; switch(router.name){ case "welcome": Component = WelcomeView; break; case "feed": Component = FeedView; break; default: //default view Component = DefaultView; } return <Component navigator={navigator} /> }, componentDidMount() { var navigator = this._navigator; BackAndroid.addEventListener('hardwareBackPress', function() { if (navigator && navigator.getCurrentRoutes().length > 1) { navigator.pop(); return true; } return false; }); }, componentWillUnmount() { BackAndroid.removeEventListener('hardwareBackPress'); }, render() { return ( <Navigator initialRoute={{name: 'welcome'}} configureScene={this.configureScene} renderScene={this.renderScene} /> ); } }); var styles = StyleSheet.create({ container: { flex: 1, //justifyContent: 'center', //alignItems: 'center', backgroundColor: '#F5FCFF', margin: 30, padding: 30 }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, } }); //AppRegistry.registerComponent('mytest01', () => SampleApp); AppRegistry.registerComponent('mytest01', function(){ var getResult = PAFFNetwork.request(); getResult.then(function(res){ return res.json(); }).then(function(res){ console.log(res); }) console.log("getResult..."); return SampleApp; });