4. Navigation实战

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

1. 项目结构

修改项目目录，便于开发，目录如下：

Paste_Image.png
主要新建了app目录，index.js是主要启动文件，子文件按项目组件构建，app文件下reducer.js，store.js，action.js对应上章redux各个流程。修改原来index.ios.js和index.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 = {};

User，Home，Notify都是一样的：

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.0，react-native的版本是0.27.2