4. Navigation实战

本来想写一个应用reduxNavigation实战,但是发现react-native有又新的更新,新手怕误导大家,就直接用了别人的组件,看看怎么应用吧。本次在github找了一个别人写好的组件react-native-router-flux,主要看看怎么集成到项目里,强烈推荐研读源码,还有一个别人项目里的,感觉也不错推荐

1. 项目结构

修改项目目录,便于开发,目录如下:

Paste_Image.png

主要新建了app目录,index.js是主要启动文件,子文件按项目组件构建,app文件下reducer.jsstore.jsaction.js对应上章redux各个流程。修改原来index.ios.jsindex.android.js如下:

'use strict';

import React, {Component, PropTypes} from 'react';
import {
  AppRegistry,
} from 'react-native';

import App from './app';

AppRegistry.registerComponent('react_native_learning', () => App);

项目依赖如下:

Paste_Image.png

2. redux相关

新建app/route.js

const initialState = {
  scene: {},
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // focus action is dispatched when a new screen comes into focus
    case "focus":
      return {
        ...state,
        scene: action.scene,
      };

    // ...other actions

    default:
      return state;
  }
}

app/reducer.js

import { combineReducers } from 'redux';
import route from './route';

export default appReducers = combineReducers({
    route,
    // other reducer
})

app/store.js,后期会扩展,这个只是最开始的样子,在redux结构中store一般只有一个,里面包含所有的state

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'; // action async suppot

import appReducers from './reducer';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(appReducers);

export default store;

app/index.js主要入口文件,如果不使用redux就没有Provider,其实就是将store注入

import React, {Component, PropTypes} from 'react';
import { Provider } from 'react-redux';

import store from './store';
import Nav from './navigation';

export default class App extends React.Component {
    render() {
        return (
            <Provider store = {store} >
                <Nav />
            </Provider>
        )
    }
}

可以看出除了主要入口外,其他js文件都是函数,在flux这样的流式系统里都是如此,这样才能充分解耦,可以应用函数式的思想做你任何想做的事,比如在store.js里的thunk就是利用这一点扩展redux进而支持异步请求API等操作,还有很多这样的组件被称作中间件,比如logger等等。

3. Navigation

这里对照react-native-router-flux官方给的例子结合redux: app/navigation.js

'use strict';

import React,{
  Component,
  PropTypes
} from 'react';

import {
  View,
  Text,
  StyleSheet,
  Navigator
} from 'react-native';

import { connect } from 'react-redux'
import {Scene, Reducer, Router, TabBar} from 'react-native-router-flux'
import TabIcon from '../components/tabIcon'

import Home from '../home'
import Notify from '../notify'
import User from '../user';

import Login from '../authorize/login'

const reducerCreate = params=>{
    const defaultReducer = Reducer(params);
    return (state, action)=>{
        console.log("ACTION:", action);
        console.log("STATE:", state);
        return defaultReducer(state, action);
    }
};

// define this based on the styles/dimensions you use
const getSceneStyle = function (/* NavigationSceneRendererProps */ props, computedProps) {
  const style = {
    flex: 1,
    // backgroundColor: '#fff',
    // shadowColor: null,
    // shadowOffset: null,
    // shadowOpacity: null,
    // shadowRadius: null,
  };
  if (computedProps.isActive) {
    style.marginTop = computedProps.hideNavBar ? 0 : 64;
    style.marginBottom = computedProps.hideTabBar ? 0 : 50;
  }
  return style;
};

class Nav extends React.Component {

  render() {
        return (
      <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
        <Scene key="root">
          <Scene key="login" component={Login} title="登录"></Scene>
          <Scene key="tabs" tabs={true} initial={true}>
              <Scene key="home" component={Home} title="首页" icon={TabIcon} iconName='md-home' initial={true}></Scene>
              <Scene key="notify" component={Notify} title="消息" icon={TabIcon} iconName='md-notifications'></Scene>
              <Scene key="user" component={User} title="我的" icon={TabIcon} iconName='md-person'></Scene>
          </Scene>
        </Scene>
      </Router>
        )
    }
}

const styles = StyleSheet.create({
  outerContainer: {
        flex: 1
    },
  container: {
    flex: 1
  }
})

export default Nav

依赖的组件TabIcon:app/components/tabIcon.js

import React, {
  Component,
  PropTypes,
} from 'react';

import {
  View,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

export default class TabIcon extends React.Component {
  render(){
      return (
          <Icon color={this.props.selected ? "red" :"black"} name={this.props.iconName} size={20}></Icon>
      );
  }
}

TabIcon.propTypes = {};

TabIcon.defaultProps = {};

UserHomeNotify都是一样的:

import React, {
  PropTypes,
} from 'react';

import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.outerContainer}>
        <Text>
          Home
        </Text>
      </View>
    );
  }
}

Home.propTypes = {};

Home.defaultProps = {};

const styles = StyleSheet.create({
  outerContainer: {
        flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
  container: {
    flex: 1
  }
})

真机运行效果图,就不做gif了:

QQ图片20160622205143.jpg

4. 总结

写的不是那么详细,一边学习一边看吧,附上github地址,可预见的错误:

  1. tabbar的icon不显示,需要link,推荐安装rnpm然后rnpm link
  2. 一直红屏,修改代码无用或是诸如Login undefined除了检查代码之外,还要确保reactjs的版本是15.1.0react-native的版本是0.27.2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

底牌项目中的选择牌谱上传功能--深刻理解UITableView复用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

861
来自专栏谈补锅

phonegap + Framework7 之 ios 推送跳转测试

先说说项目情况:使用phonegap创建的ios项目,然后在使用html + css开发网页中又使用了一个框架Framework7(Framework7是一个...

1393
来自专栏Scott_Mr 个人专栏

自定义转场详解(一)

3536
来自专栏谈补锅

通知 - NSNotificationCenter

1、每一个应用程序都有一个通知中心(NSNotificationCenter)实例,专门负责协助不同对象之间的消息通信;

1194
来自专栏落影的专栏

iOS开发笔记(三)

前言 日常开发遇到的问题记录。 JSON Invalid type in JSON write (NSConcreteMutableData) 合法的j...

5775
来自专栏每日一篇技术文章

weex-31-接入iOS完整步骤

由于WeexSDK 中没有图片下载功能,所以需要我们自己定义,其实也比较简单,创建一个类 实现两个协议即可

1731
来自专栏青青天空树

nodejs构建多房间简易聊天室

  本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下。

3081
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

3477
来自专栏君赏技术博客

UIBarButtonItem我用了这些姿势才能和你交互

因为系统是没有方式可以获取到 Done 按钮的,我们运用运行时倒是可以获取到这个按钮。

2435
来自专栏一“技”之长

NSAlert组件应用总结 原

    在桌面软件开发中,当用户进行非法的操作或有风险的操作时,时长需要弹出警告框来提示用户。在OS X系统上,NSAlert是专门的警告框组件。其提供了简洁的...

1164

扫码关注云+社区

领取腾讯云代金券