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 条评论
登录 后参与评论

相关文章

  • 5. ListView应用

    ListView大概是所有移动应用都会用到的组件了,大部分都在首页,这章结合redux来看如何从API取数据再到如何应用redux更新渲染组件ListView。

    MasterVin
  • 6. Bug Fix以及前期总结

    修复1个简单bug,在Android手机里因为有Back按键,所有需要特殊处理,直接贴代码如下: 修改app/navigation/index.js添加如下代...

    MasterVin
  • VUX 单页微信开发的那些事

    VUX是微信推出的WeUI的非官方VUE的非官方实现,主要针对移动端微信前端开发,属于个人项目,目前在GitHub已有8k star,使用webpack 2以及...

    MasterVin
  • 【React】:路由(Routing)

    Vue 路由库:Vue Router https://router.vuejs.org/zh/ iview-admin 对路由的管理: https://li...

    WEBJ2EE
  • Python 实现一个简单的上下文管理器

    简单、
  • JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

    在之前的两篇教程中,我们学会了如何去测试最简单的 React 组件。在实际开发中,我们的组件经常需要从外部 API 获取数据,并且组件的交互逻辑也往往更复杂。在...

    一只图雀
  • React第三方组件3(状态管理之Flux的使用②TodoList上)

    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件3(状态管理之Flux的使用①简单...

    前端人人
  • 5-5 webapck-dev-server 解决单页应用路由问题

    对于单页应用 spa,大家应该都不陌生了。本节主要介绍 webpack-dev-server 如何解决 spa 遇到的路由问题。

    love丁酥酥
  • 【Web技术】639- Web前端单元测试到底要怎么写?

    随着 Web 应用的复杂程度越来越高,很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用,但在...

    coder_koala
  • JavaScript测试教程–part 4:模拟 API 调用和模拟 React 组件交互[每日前端夜话0xEA]

    今天,我们进一步测试 React 组件。它涉及模拟组件交互和模拟 API 调用。你将学到两种方法,开始吧!

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券