lightbox

Author: febobo

ios/FeInn/AppDelegate.m

@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * on the same Wi-Fi network.
    */
 
-  jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.41:8081/index.ios.bundle?platform=ios&dev=true"];
+  jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?platform=ios&dev=true"];
 
   /**
    * OPTION 2

src/actions/ActicleActions.js

@@ -0,0 +1,10 @@
+import * as types from './actionTypes';
+import * as acticleService from '../service/acticleService';
+import {createAction} from 'redux-actions';
+
+export const getPhoto = createAction(types.GET_PHOTO , acticleService.getPhoto , ({
+  page,
+  limit
+} , resolved , rejected) => {
+  resolved && resolved();
+})

src/actions/ActionTypes.js

@@ -8,3 +8,4 @@ export const REPLY_TOPIC = 'REPLY_TOPIC'; // 评论
 export const UPS_TOPIC = 'UPS_TOPIC'; // topic 点赞
 export const GET_TOPIC_DETAIL = 'GET_TOPIC_DETAIL'; // 获取文章详情
 export const UP_REPLY = 'UP_REPLY'; // 评论点赞
+export const GET_PHOTO = 'GET_PHOTO'; // 评论点赞

src/actions/index.js

@@ -4,12 +4,14 @@ import * as UserActions from './UserActions'
 import * as TabActions from './TabActions'
 import * as UtilsActions from './UtilsActions'
 import * as CommentActions from './CommentActions'
+import * as ActicleActions from './ActicleActions'
 
 export default {
   ...DetailActions,
   ...EssenceActions,
   ...TabActions,
   ...UserActions,
   ...UtilsActions,
-  ...CommentActions
+  ...CommentActions,
+  ...ActicleActions
 }

src/config/index.js

@@ -1,4 +1,5 @@
 export default {
   domain : 'https://cnodejs.org/api/v1',
+  ghDomain : 'http://gank.io/api/data',
   replySuffix: '\nFrom [变异后的 CNode+](https://github.com/febobo/react-native-redux-FeInn)',
 }

src/container/tabview.js

@@ -15,13 +15,14 @@ import {
 import Icon from 'react-native-vector-icons/Ionicons';
 const myIcon = (<Icon name="ios-time" size={30} color="#900" />)
 import * as EssencePage from '../page/Essence';
-import Article from '../page/Article';
+import * as ArticlePage from '../page/Article';
 import Welfare from '../page/Welfare';
 import * as Login from '../page/Login';
 import connectComponent from '../utils/connectComponent';
 import TabNavigator from 'react-native-tab-navigator';
 import iconHome from '../public/favicon.png';
 const Essence = connectComponent(EssencePage);
+const Article = connectComponent(ArticlePage);
 
 export default class TabView extends Component {
   constructor (props){

src/page/Article.js

@@ -4,28 +4,89 @@ import {
   Navigator ,
   View ,
   Text,
-  StyleSheet
+  StyleSheet,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+  Dimensions
 } from 'react-native';
 
-export default class Article extends Component {
+class Article extends Component {
   constructor (props){
     super(props);
   }
 
+  componentWillMount(){
+    const { actions } = this.props;
+    actions.getPhoto({
+      page :1,
+      limit:10
+    })
+  }
+
   render (){
+    console.log(this)
+    const { Acticle } = this.props;
     return (
       <View style={[styles.container]}>
-        <Text style={{fontSize:30,color:'#fff'}}>Hello React-native</Text>
+      {
+        Acticle && Acticle.photos && Acticle.photos.length !=0 ?
+        <ScrollView style={{flex:1}}>
+
+          <View style={styles.imgsWrap}>
+            <View style={styles.imgs}>
+              {this._renderImg(Acticle.photos.slice(0,5))}
+            </View>
+            <View style={styles.imgs}>
+              {this._renderImg(Acticle.photos.slice(5,10))}
+            </View>
+          </View>
+        </ScrollView> :
+        <View style={{flexDirection:'row',paddingTop:30,alignItems : 'center',justifyContent : 'center'}}>
+          <Text style={{fontSize:20}}>说好的妹子呢</Text>
+        </View>
+      }
       </View>
     )
   }
-}
 
+  _renderImg(imgs){
+    return (
+      imgs.map( (v,k) =>{
+        return (
+          <TouchableOpacity
+            key={'photo-' + k}
+          >
+            <Image
+              style={{width:width/2,height:parseInt(Math.random() * (width/4) + (width/2))}}
+              source={{uri : v.url}}
+            />
+          </TouchableOpacity>
+        )
+      })
+    )
+  }
+}
+const { width , height } = Dimensions.get('window');
 const styles = StyleSheet.create({
   container : {
     flex : 1,
-    alignItems : 'center',
-    justifyContent : 'center',
-    backgroundColor : 'blue'
-  }
+    // alignItems : 'center',
+    // justifyContent : 'center',
+    // backgroundColor : 'blue'
+  },
+  imgsWrap : {
+    flex :1,
+    flexDirection : "row"
+  },
+  imgs : {
+    flex : 1
+  },
 })
+
+export const LayoutComponent = Article;
+export function mapStateToProps(state){
+  return {
+    Acticle : state.Acticle,
+  }
+}

src/page/Comment.js

@@ -97,7 +97,6 @@ class Comment extends Component {
 	}
 
   _scrollToTop() {
-    console.log(this._listView)
 		this._listView.scrollTo({
 			x: 0,
 			y: 0

src/reducers/Acticle.js

@@ -0,0 +1,17 @@
+import * as types from '../actions/actionTypes';
+
+export default function Acticle (state={} , action={}){
+  console.log(action)
+  const { payload } = action;
+  switch (action.type) {
+    case types.GET_PHOTO:
+      return Object.assign(
+        {} , state , {
+          photos : payload
+        }
+      )
+      break;
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -4,11 +4,14 @@ import Detail from './Detail'
 import Comment from './Comment'
 import User from './User'
 import Utils from './Utils'
+import Acticle from './Acticle'
+
 export {
   Essence,
   Tab,
   Detail,
   Comment,
   User,
-  Utils
+  Utils,
+  Acticle
 }