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

前面我们学习了react-native-router-flux，接下来我们将使用其搭建微博主界面

react_native_router_flux_使用详解一.php

react_native_router_flux_使用详解二.php

react_native_router_flux_使用详解三.php

第一步先来个简单的主页面切换

先上效果图：

源码已上传码云：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 (

component={Modal}>

key="main"

tabs={true}

hideNavBar={false}

tabBarStyle={styles.tabBarStyle}>

key="home"

title="Home title"

hideNavBar={false}

tabTitle="微博"

component={HomeView}

initial={true}

icon={TabIcon}

/>

key="message"

hideNavBar={false}

tabTitle="信息"

title="Message title"

component={MessageView}

icon={TabIcon}

/>

key="tabbarpublish"

tabTitle="发布"

title=" title"

component={PublishView}

icon={TabIcon}

/>

key="discrover"

tabTitle="发现"

hideNavBar={false}

title="Discrover title"

component={DiscroverView}

icon={TabIcon}

/>

key="profile"

title="Profile title"

tabTitle="我的"

hideNavBar={false}

component={ProfileView}

icon={TabIcon}

/>

);

}

}

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

}

});

后面将继续学习RN技术，欢迎一起探讨学习

React_Native学习之制作RN版的微博app二.php