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-ui
TGFind.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;