APP结构探索

我在Github上找到了一个有登陆界面，能从网上获取新闻信息的开源APP，想来研究一下APP的结构。

具体来讲，就是研究一个复杂功能的APP在编写时是如何一步一步展开的，包括APP内部逻辑、与UI交互、与服务器交互等。

index.android.js

首先，我找到了index.android.js文件。文件很短，内容如下：

/**

 * News

 * author : lufeng

 */

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

var Route = require("./web_modules/route");

AppRegistry.registerComponent('News', () => Route);

可以看到，关键代码只有从"./web_modules/route"调用的Route，这也是整个程序的入口。

route.js

顺藤摸瓜找到了route.js，代码比之前长了一点，如下：

/*

 * 页面路由

 */

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  BackAndroid,

  Navigator,

  Image,

  Text,

  View,

  StatusBar

} from 'react-native';

var Tab = require("./tab");

var _navigator;

var Routes = React.createClass({

	configureScence: function(){

		return Navigator.SceneConfigs.FloatFromRight;

	},

	renderScene: function(route, navigator){

		_navigator = navigator;

		let Component = route.component;

		return <Component route={route} navigator={navigator}/>

	},

	render: function(){

		var renderScene = this.renderSceneAndroid;

		var configureScence = this.configureScenceAndroid;

		return (

			<Navigator

				initialRoute={{ name: '主页', component:Tab }}

				configureScene={ this.configureScence }

				renderScene={ this.renderScene}

			/>

		);

	}

});

//监听硬件的back键操作

BackAndroid.addEventListener('hardwareBackPress', function() {

	if(_navigator == null){

		return false;

	}

	if(_navigator.getCurrentRoutes().length === 1){

		return false;

	}

	_navigator.pop();

	return true;

});

module.exports = Routes;

route.js文件里的结构仍然很清晰，主要有三部分：

注册了名为Routes的组件。
监听back键操作并进行相应处理。
导出Routes。

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

Navigator

这里涉及到Navigator的一些知识：

Navigator即导航器，通过导航器我们可以实现应用在不同的页面之间进行跳转。

导航器会建立一个路由栈，用来弹出，推入或者替换路由状态。该路由栈相当于Android原生中使用的任务栈。

renderScene

renderScene方法就相当于我们使用的startActivity方法了，我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中route就是路由的页面，navigator是一个Navigator对象，因为Navigator对象拥有pop，push，jump等方法，我们需要导航器对象来实现页面的跳转。而路由route需要我们提前进行配置。

configureScene

该方法用来设置指定路由对象的配置信息，从而改变场景的动画或者手势。如：

configureScene={(route) => {

      //跳转的动画

      return Navigator.SceneConfigs.VerticalDownSwipeJump;

}}

initialRoute

用来设置默认页面，也就是启动APP看到的第一个页面，需要两个参数，name和component。

可以看到，这里设置的默认页面来自Tab。而Tab来自"./tab"，我们打开tab.js，重头戏好像来了！！因为我看到了很多写页面的代码。。。

tab.js

先贴代码：

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Image,

  Text,

  View,

  StatusBar

} from 'react-native';

import TabNavigator from 'react-native-tab-navigator'; //引入tabbar支持包  

const TabNavigatorItem =TabNavigator.Item;

const TAB_ITEM = [{

	code : 'Home',

	name : '首页',

	icon_n : require('./images/tab/tab_messagecenter_n.png'),

	icon_p : require('./images/tab/tab_messagecenter_p.png'),

	contentView : require('./tab_home')

},{

	code : 'Suggest',

	name : '推荐',

	icon_n : require('./images/tab/tab_contact_n.png'),

	icon_p : require('./images/tab/tab_contact_p.png'),

	contentView : require('./tab_suggest')

},{

	code : 'Find',

	name : '发现',

	icon_n : require('./images/tab/tab_discovery_n.png'),

	icon_p : require('./images/tab/tab_discovery_p.png'),

	contentView :  require('./tab_find')

},{

	code : 'Mine',

	name : '我的',

	icon_n : require('./images/tab/tab_myself_n.png'),

	icon_p : require('./images/tab/tab_myself_p.png'),

	contentView :  require('./tab_mine')

}];

class Tab extends Component {  

	constructor(props){

		super(props);

		this.state = {

			items : TAB_ITEM,

			selectedTab : TAB_ITEM[0].code

		}

	}  

	/*

	 * tab点击方法

	 */

	onPress(tabCode){

		if(tabCode){

			this.setState({

				selectedTab : tabCode

			});

		}

	}  

    /*

     *渲染每项

     */

	renderTabView(options){

		var tabNomal = options.icon_n;

		var tabPress = options.icon_p;  

		return(

			<TabNavigatorItem

				key={options.code}

				title={options.name}

				renderIcon={()=><Image style={styles.tabIcon} source={tabNomal}/>}

				renderSelectedIcon={()=><Image style={styles.tabIcon} source={tabPress}/>}

				selected={this.state.selectedTab === options.code}

				selectedTitleStyle={{color:'#333333'}}

				onPress={()=>this.onPress(options.code)}

				renderBadge= {()=>options.badgeNum?<View style={styles.badgeView}>

											<Text style={styles.badgeText}>options.badgeNum</Text>

										  </View>:null}>

				<options.contentView route={this.props.route} navigator={this.props.navigator}/>

			</TabNavigatorItem>

		);

	}  

	render() {  

		var items = [];

        for (var i=0; i< this.state.items.length; i++) {

            items.push(this.renderTabView(this.state.items[i]));

        }

		return (

			<View style={styles.container}>

				<TabNavigator tabBarStyle={styles.tab}>

					{items}

				</TabNavigator>

			</View>

		);

	}

}  

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#F5FCFF',

  },

  tab:{

    height: 55,

    alignItems:'center',

    backgroundColor:'#f4f5f6',

  },

  tabIcon:{

    width:25,

    height:25,

  },

  badgeView:{

    width:22,

    height:14 ,

    backgroundColor:'#f85959',

    borderWidth:1,

    marginLeft:10,

    marginTop:3,

    borderColor:'#FFF',

    alignItems:'center',

    justifyContent:'center',

    borderRadius:8,

  },

  badgeText:{

    color:'#fff',

    fontSize:8,

  }

});  

module.exports = Tab;

这里看的比较费力。。先是创建了一个名为tab的类，然后将界面底部的所有项的信息作为TAB_ITEM传到tab的constructor中。接着是onPress()方法作为tab的点击方法，后面的renderTabView方法的注释中标明了是渲染每项，其中又调用了TabNavigatorItem组件，这个组件来自Github。最后的render()里就是加载了整个布局。

TabNavigator

Tab组件（底部导航）：react-native-tab-navigator

https://github.com/exponentjs/react-native-tab-navigator

TAB_ITEM

这里以tab_home.js为例，其他的类似。核心代码如下：

class Tab_Home extends Component { 

	constructor(props){

		super(props);

	}  

	showActionSheet(){

		this.ActionSheet.show();

	}

	render() {

		return (

			<View style={{flex:1,justifyContent:'flex-start',alignItems:'center', bottom : 5}}>

				<View style={styles.header}>

					<View style={styles.header_btn}></View>

					<View style={styles.header_center}>

						<Text style={styles.header_title}>新闻网</Text>

					</View>

					<TouchableOpacity  onPress={this.showActionSheet.bind(this)}>

						<Image source={require('./images/header/more.png')} style={styles.header_icon,styles.header_btn}/>

					</TouchableOpacity>

				</View>

				<Swiper style={styles.wrapper} showsButtons={false} autoplay={false} height={200} showsPagination={true}>

					<Image style={styles.slide} source={ require('./images/demo/slideshow1.jpg') }></Image>

					<Image style={styles.slide} source={ require('./images/demo/slideshow2.jpg') }></Image>

					<Image style={styles.slide} source={ require('./images/demo/slideshow3.jpg') }></Image>

					<Image style={styles.slide} source={ require('./images/demo/slideshow4.jpg') }></Image>

					<Image style={styles.slide} source={ require('./images/demo/slideshow5.jpg') }></Image>

				</Swiper>

				<List dataNums="6" route={this.props.route} navigator={this.props.navigator}/>

				<ActionSheet

                    ref={(o) => this.ActionSheet = o}

                    title="进入新闻推荐分类！"

                    options={buttons}

                    cancelButtonIndex={0}

                    destructiveButtonIndex={1}

                />

			</View>

		);

	}

}

这个类主要是首页的布局，涉及到多种组件。其中比较值得一提的是TouchableOpacity、Swiper和ActionSheet。

TouchableOpacity

本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。这个过程并不会真正改变视图层级，大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。（译注：此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景）

这里此组件的onPress()事件的处理是弹出ActionSheet菜单。

Swiper

用于组件（常见的是图片）的轮播。

官方文档：https://github.com/leecade/react-native-swiper

ActionSheet

从页面底部弹出菜单，拥有标题等属性，常用于应用的退出。本例是选择栏目用。（虽然没有实现具体的功能）

官方文档：https://github.com/beefe/react-native-actionsheet

今天就先到这啦。明天继续看~~

感谢以下几篇博客：

我的第一个React Native App

Navigator

ReactNative页面跳转Navigator

React入门实例教程

TouchableOpacity

秒客网

React Native APP结构探索

APP结构探索

index.android.js

route.js

Navigator

renderScene

configureScene

initialRoute

tab.js

TabNavigator

TAB_ITEM

TouchableOpacity

Swiper

ActionSheet

相关文章