React-Native 学习之制作 RN 版的微博 app(一)

前面我们学习了 react-native-router-flux，接下来我们将使用其搭建微博主界面
第一步先来个简单的主页面切换

先上效果图：

源码已上传码云：https://git.oschina.net/osczaizai/RNWeiBo

根据前面的学习，我们在本项目中通过 npm 将 react-native-router-flux 安装到 RNWeibo 中，

npm i react-native-router-flux --save
​

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Dimensions,
    Image,
    Text,
    View,
    Platform
} from 'react-native';
import {
    Scene,
    Reducer,
    Router,
    Modal,
    Actions,
    ActionConst
}from'react-native-router-flux';

import HomeView from './pages/home';
import PublishView from './pages/publish';
import ProfileView from './pages/profile';
import MessageView from './pages/message';
import DiscroverView from './pages/discrover';
import TabIcon from './components/TabIcon';
import Error from './components/Error';

const px = 1 / PixelRatio.get();
const screentWidth = Dimensions.get('window').width;
const screentHeight = Dimensions.get('window').height;
var statusBarHeight = Platform.OS == 'android' ? 25 : 0;
var postButtonWidth = 40;
var postButtonHeight = 40;
var tabbarHeight = 60;

/**
 * 包装reducer构造函数返回一个闭包
 * @param params
 * @returns {function(*=, *=)}
 */
const reducerCreate = (params) => {
    const defaultReducer = new Reducer(params);
    return (state, action) => {
        console.log('ACTION:', action);
        return defaultReducer(state, action);
    }
};
/**
 * 定义基本的样式
 * @param props
 * @param computedProps
 * @returns {{flex: number, backgroundColor: string, shadowColor: null, shadowOffset: null, shadowOpacity: null, shadowRadius: null}}
 */
const getSceneStyle = (props, computedProps) => {
    const style = {
        flex: 1,
        backgroundColor: '#fff',
        shadowColor: null,
        shadowOffset: null,
        shadowOpacity: null,
        shadowRadius: null,
    };
    if (computedProps.isActive) {

        console.log(computedProps)
        style.marginTop = computedProps.hideNavBar ? 0 : 64;
        style.marginBottom = computedProps.hideTabBar ? 0 : 50;
    }
    return style;
};

export default class RootView extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectedTab: 'home',
        };
    }

    render() {
        return (

        );
    }
}

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

    },
    tab_image: {
        height: 28,
        width: 28,
    },
    tabBarStyle: {
        borderTopWidth: 0.5,
        borderColor: '#b7b7b7',
        backgroundColor: 'white',
        opacity: 1
    },
    post: {
        width: postButtonWidth,
        height: postButtonHeight,
        backgroundColor: 'red',
        top: screentHeight - tabbarHeight - statusBarHeight + ((tabbarHeight - postButtonHeight) / 2),
        left: (screentWidth - postButtonWidth) / 2,

        position: 'absolute',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});
​