React Native APP结构探索

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

附上原网址：我的第一个React Native 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}  
                                selectedTitle#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 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 ./images/demo/slideshow1.jpg') }></Image>
                                        <Image ./images/demo/slideshow2.jpg') }></Image>
                                        <Image ./images/demo/slideshow3.jpg') }></Image>
                                        <Image ./images/demo/slideshow4.jpg') }></Image>
                                        <Image ./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