RN综合演练（TabBarIOS、NavigatorIOS）
来源：互联网 发布：下载网购淘宝网 编辑：程序博客网 时间：2024/05/31 18:52
index.js
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var Main = require('./Components/TGMain');export default class TGNews extends Component { render() { return ( <Main /> ); }}AppRegistry.registerComponent('TGNews', () => TGNews);TGMain.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, TabBarIOS, NavigatorIOS} from 'react-native';var Home = require('../Components/TGHome');var Find = require('../Components/TGFind');var Message = require('../Components/TGMessage');var Mine = require('../Components/TGMine');var Main = React.createClass({ getInitialState(){ return{ selectedItem: 'home' } }, render() { return ( <TabBarIOS tintColor = "orange"> <TabBarIOS.Item icon= {require('image!tabbar_home')} title="首页" selected={this.state.selectedItem == 'home'} onPress={()=>{this.setState({selectedItem: 'home'})}} > <NavigatorIOS tintColor = "orange" style={{flex:1}} initialRoute = { { component: Home, title:'网易', leftButtonIcon:require('image!navigationbar_friendattention'), rightButtonIcon:require('image!navigationbar_pop') } } /> </TabBarIOS.Item> <TabBarIOS.Item icon= {require('image!tabbar_discover')} title="发现" selected={this.state.selectedItem == 'discover'} onPress={()=>{this.setState({selectedItem: 'discover'})}} > <NavigatorIOS style={{flex:1}} initialRoute = { { component: Find, title:'发现' } } /> </TabBarIOS.Item> <TabBarIOS.Item icon= {require('image!tabbar_message_center')} title="消息" selected={this.state.selectedItem == 'message'} onPress={()=>{this.setState({selectedItem: 'message'})}} > <NavigatorIOS style={{flex:1}} initialRoute = { { component: Message, title:'消息' } } /> </TabBarIOS.Item> <TabBarIOS.Item icon= {require('image!tabbar_profile')} title="我的" selected={this.state.selectedItem == 'profile'} onPress={()=>{this.setState({selectedItem: 'profile'})}} > <NavigatorIOS style={{flex:1}} initialRoute = { { component: Mine, title:'我的' } } /> </TabBarIOS.Item> </TabBarIOS> ); }});module.exports = Main;TGHome.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity} from 'react-native';var localdatas = require('../localdatas.json');var ScrollImage = require('../Components/TGScrollImage');var Detail = require('../Components/TGDetail');var Dimensions = require('Dimensions');var ScreenW = Dimensions.get('window').width;var Home = React.createClass({ getDefaultProps(){ return { url_api: "http://c.m.163.com/nc/auto/list/5YWo5Zu9/0-20.html" } }, getInitialState(){ return { headerDs: [], listDs: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) } }, render() { return ( <ListView dataSource={this.state.listDs} renderRow={this.renderRow} renderHeader={this.renderHeader} /> ); }, renderRow(row){ return( <TouchableOpacity activeOpacity={0.5} onPress={()=>{this.pushToDetail(row)}}> <View style={styles.cellViewStyle}> <Image source={{uri:row.imgsrc}} style={styles.imgStyle}/> <View style={styles.rightViewStyle}> <Text style={styles.titleStyle}>{row.title}</Text> <Text style={styles.subTitleStyle}>{row.digest}</Text> <Text style={styles.replyTitleStyle}>{row.replyCount}跟帖</Text> </View> </View> </TouchableOpacity> ); }, pushToDetail(row){ this.props.navigator.push({ component: Detail, title: row.title, passProps:{row} }) }, renderHeader(){ if (this.state.headerDs.length == 0) return; return( <ScrollImage imageDs = {this.state.headerDs}/> ); }, componentDidMount(){ fetch(this.props.url_api) .then((response)=>response.json()) .then((responseData)=>{ var jsonData = responseData['list']; this.dealWithData(jsonData); }) .catch((error)=>{ if(error){ var jsonData = localdatas['list']; this.dealWithData(jsonData) } }) }, dealWithData(jsonData){ var headerArr = [], listDataArr = []; for(var i=0; i<jsonData.length; i++){ var data = jsonData[i]; if(data.hasAD == 1){ headerArr = data.ads; headerArr.push(data) }else{ listDataArr.push(data); } } this.setState({ headerDs: headerArr, listDs: this.state.listDs.cloneWithRows(listDataArr) }); }});const styles = StyleSheet.create({ cellViewStyle:{ flexDirection:'row', padding:8, borderBottomColor:'#A8A8A8', borderBottomWidth:0.2 }, imgStyle:{ width:100, height:100 }, rightViewStyle:{ width: ScreenW-124, marginLeft:8 }, titleStyle:{ fontSize:14, color:'#2B2B2B', marginBottom:4 }, subTitleStyle:{ fontSize:11, color:'#6B6B6B', }, replyTitleStyle:{ position:'absolute', right:4, bottom:0, borderWidth:0.5, borderColor:'gray', borderRadius:4, padding:2, backgroundColor:'#EDEDED', color:'gray' }});module.exports = Home;//http://www.114la.com/other/rgb.htm//http://localhost:8081/debugger-uiTGFind.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var Find = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 发现 </Text> </View> ); }});const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }});module.exports = Find;TGMessage.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var Message = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 消息 </Text> </View> ); }});const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }});module.exports = Message;TGMine.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';var Mine = React.createClass({ render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 我的 </Text> </View> ); }});const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }});module.exports = Mine;TGDetail.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, WebView} from 'react-native';var Detail = React.createClass({ getInitialState(){ return{ detailData: '' } }, render() { return ( <WebView automaticallyAdjustContentInsets={true} //style={styles.webView} source={{html: this.state.detailData, baseUrl: ''}} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} scalesPageToFit={this.state.scalesPageToFit} /> ); }, componentDidMount(){ var url_api = 'http://c.m.163.com/nc/article/'+this.props.row.docid+'/full.html'; console.log(url_api); fetch(url_api) .then((response) => response.json()) .then((responseData)=>{ console.log(responseData); var allData = responseData[this.props.row.docid]; var bodyHtml = allData['body']; if(allData['img'].length > 0){ for(var i=0; i<allData['img'].length; i++){ var img = allData['img'][i]; var imgSrc = img['src']; var imgHtml = '<img src="' + imgSrc + '" width="100%">'; bodyHtml = bodyHtml.replace(img['ref'], imgHtml); } } this.setState({ detailData:bodyHtml }); }) .catch((error) => { alert('请求数据失败'); }) }});module.exports = Detail;TGScrollImage.js
/** * Created by targetcloud on 2016/12/19. */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, ScrollView, Image} from 'react-native';var Dimensions = require('Dimensions');var {width,height} = Dimensions.get('window');var TimerMixin = require('react-timer-mixin');var ScrollImage = React.createClass({ mixins: [TimerMixin], getDefaultProps(){ return{ scrollDuration: 2000, imageHeight: 180, imageDs: [] } }, getInitialState(){ return{ currentPageIndex: 0, title:this.props.imageDs[0].title } }, componentDidMount(){ this.startTimer(); }, render() { return ( <View style={styles.container}> <ScrollView ref="scrollViewRef" horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true} onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)} onScrollBeginDrag={this.onScrollBeginDrag} onScrollEndDrag={this.onScrollEndDrag}> {this.renderAllImage()} </ScrollView> <Text style={styles.tipStyle}>
{this.state.title}</Text> <View style={styles.pageViewStyle}> <View style={{flexDirection:"row"}}>{this.renderPageCircle()}</View> </View> </View> ); }, renderAllImage(){ var allImage = []; var imgsArr = this.props.imageDs; for(var i=0; i<imgsArr.length; i++){ allImage.push( <Image key={i} source={{uri: imgsArr[i].imgsrc}} style={{width:width, height:this.props.imageHeight,resizeMode:Image.resizeMode.stretch}}/> ); } return allImage; }, renderPageCircle(){ var indicatorArr = []; var style; var imgsArr = this.props.imageDs; for(var i=0; i<imgsArr.length; i++){ style = (i==this.state.currentPageIndex) ? {color:'orange'} : {color:'white'}; indicatorArr.push( <Text key={i} style={[{fontSize:18},style]}>•</Text> ); } return indicatorArr; }, onScrollBeginDrag(){ this.clearInterval(this.timer); }, onScrollEndDrag(){ this.startTimer(); }, onAnimationEnd(e){ var offSetX = e.nativeEvent.contentOffset.x; var activePage = Math.floor(offSetX / width); this.setState({ currentPageIndex: activePage, title: this.props.imageDs[activePage].title }); }, startTimer(){ var scrollViewRef = this.refs.scrollViewRef; var imgCount = this.props.imageDs.length; this.timer = this.setInterval(function () { var activePage = (this.state.currentPageIndex+1) >= imgCount ? 0 :this.state.currentPageIndex+1; this.setState({ currentPageIndex: activePage, title:this.props.imageDs[activePage].title }); scrollViewRef.scrollResponderScrollTo({x:activePage * width, y:0, animated:true}); }, this.props.scrollDuration); },});const styles = StyleSheet.create({ tipStyle:{ width:width, backgroundColor:'rgba(0,0,0,0)', position:'absolute', bottom:2, fontSize: 14, color: '#FFFFFF' }, pageViewStyle:{ width:width, height:20, backgroundColor:'rgba(0,0,0,0.3)', position:'absolute', bottom:0, flexDirection:'row', justifyContent:'flex-end', alignItems:'flex-end' }});module.exports = ScrollImage;
0 0
- RN综合演练（TabBarIOS、NavigatorIOS）
- RN综合演练，仿美团电商（谢谢你的STAR）
- TabBarIOS和NavigatorIOS组合使用
- TabBarIOS
- RN填坑-----tabBarIOS的icon和selectedIcon设置后无效
- 黑马程序员——Foundation（二）--经典基础知识联系和综合演练
- 菜鸟学Android笔记（十五）：Tomcat、web应用配置和综合演练
- 二维码系列（五）综合DEMO演练,工具类效能提升
- React-native开发系列（一）---NavigatorIOS应用
- RN
- RN
- RN
- RN
- 备份恢复4.3——rman备份恢复综合演练
- JAVA-17.2-集合、IO流之综合演练
- 演练
- RN（react native）入坑指南-01,Hello RN
- RN入坑一（环境搭建）
- 每天学习opensatck（5）
- git tag到远程
- Filter介绍
- 设计模式-建造者模式
- CH7--数组，p120,list遍历数组方法
- RN综合演练（TabBarIOS、NavigatorIOS）
- ElasticSearch聚合分析API
- 从Hello World说程序运行机制
- php利用file_get_contents函数抓取网页指定内容
- c语言版大数计算器（实现大数的加减乘除运算）
- Jetson TX1刷机历险记
- MySql从表结果集中随机取一条数据
- Linux 进程
- php+sqlserver之如何连接sqlserver数据库
