这次练习使用了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; });
相关推荐
React Native 基础学习笔记
React Native学习笔记 欢迎您帮忙纠错,一起帮助更多的人,学习交流QQ群: React本机 开发工具 [使用WebStorm调试React Native] [故事书] [reactotron] 节点相关 最佳拍档 原生集成 模拟与测试 [easy-mock介绍] ...
React Native 学习笔记,总结的还不错咯
react-native 调用android原生模块-Toast 学习笔记
抽空学习了下react-native教程,花了三周多下班时间,开发了这个项目 ,使用的最新的react-native版本0.60.4, 配色和主要功能布局参照了印象笔记客户端,当然作为练手项目,功能没有那么全面, 作为入门学习应该是够了....
此项目记录我在2017年3月学习的过程,整理了一下放到GitHub上,分为React、React Native和豆瓣项目实战三个部分(DoubanProject在Recat Native Demo文件目录下),废话不多说,贴上笔记和代码。 第一部分 React 简介 ...
在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记。 今天我们来说下RN对键盘事件的支持。 在React-native 的Component组件中有个Keyboard. github地址如下...
我的目标是实际学习React + / React-Native,因为我发现它们很酷,可以创建出色的应用程序。 (首先,我建议任何人签出我的笔记,在构建此项目时,我按照Ben Awad的播放列表进行 -继续,单击并签出,以查看详细的...
使用 React Native 开发的一个笔记App,这是一个学习 React Native的练习项目
ReactNative 目标 使应用程序可以离线和在线工作 严重的是我不确定 我只想了解更多信息并利用它来更好地构建 我的建筑在下面 :party_popper: :party_popper: 效果很好,但还需要添加更多内容 记笔记页面
要运行此应用程序: $ npm install$ react-native link$ react-native start$ react-native run-iosor$ react-native run-android截屏v1.0版本@ 2018/06/13 词汇表条目的添加/更新/删除超过12 每张卡的用户语音记录/...
一份传男也传女的 React Native 学习笔记学习就如同长跑,要想跑的远,就不能跑得太快。背景介绍这段时间了解了一些前端方面的知识,并且用 React Native 写了一个简易新闻客户端 Demo。React Native 和原生开发...
最近在学习ReactNative,本文介绍了ReactNative列表ListView的用法,分享给大家,也给自己留个笔记 ListView 在Android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView的数据源,其次是...
dice评价指标matlab代码 ...React-Native学习指南 08 Android源码设计模式分析项目 该系列文章已经重新深度整理并出版 09 设计模式 - 收藏集 - 掘金 一个帮助开发者成长的社区 10 给 Android 开发者的 RxJava 详解 11
React-Native学习指南 08 Android源码设计模式分析项目 该系列文章已经重新深度整理并出版 09 设计模式 - 收藏集 - 掘金 一个帮助开发者成长的社区 10 给 Android 开发者的 RxJava 详解 11 常用的An
遵循Lynda课程:学习React.js 去做 第02章 React语法 JSX简介 创建一个ES6类组件 创建无状态组件 使用属性 使用状态 第03章 ...与Alex Banks学习React Native 与Emmanuel Henri学习React VR
ReactNative-错误警告 注:这里是我在开发过程中遇到问题总结,之后会持续更新,希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习,同时欢迎大神补充。(之后我会放出自己开发整理的笔记和 )欢迎持续喜欢...
ReactJs 学习笔记简单的记录自己对ReactJs的学习内容。ReactJs 相当属于是用原声的JS去创建对应HTML标签,然后可以构建对应HTML标签,这些标签就可以使用对应的内容信息来使用。学习资料网上的相关资料lynda的视频...
一个用React Native编写的用于学习的简单笔记应用程序
我决定自己创建一个茶笔记应用程序,并学习React Native的新知识。 从2016年9月到2016年12月,我花了3个月的时间设计,构建和测试我的想法。 这就是结果! 如何 将此仓库克隆到您的计算机上 git clone ...