React Native学习笔记之–常用App框架的搭建（标签栏+导航栏）

来源： 2017-06-18 16:50:57 评论：0点击：

市面上面很多APP的框架都是使用标签栏加上导航栏的架构，今天就利用React Native框架来搭建适配iOS和Android双端的框架结构。

第一步进入项目工程引入标签栏的框架

npm i react-native-tab-navigator --save

出现如下图所示表示引入成功,并且在项目工程中可以看到对应文件

第二步就是查看文档和API如何使用它了

这里写图片描述

第三部引入导航栏Navigator（注意：导航栏需要自己定义才能显示）

部分代码如下：

/**
 * Created by wangjie on 2016/12/5.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
    Platform
} from 'react-native';

// npm i react-native-tab-navigator --save
import TabNavigator from 'react-native-tab-navigator';
import HomeView from '../Home/HomeView';
import BusinessView from '../Business/BusinessView';
import MineView from '../Mine/MineView';
import MoreView from '../More/MoreView';

export default class MainView extends Component {
    // 构造
      constructor(props) {
        super(props);

          // 代码关闭黄屏警告
          console.disableYellowBox = true;

        // 初始状态
        this.state = {
            selectedTab: 'home'
        };
      }

    render() {
        return(
            <TabNavigator>
                {this.renderTabBatItem('主页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected', 'home', HomeView)}
                {this.renderTabBatItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected', 'business', BusinessView)}
                {this.renderTabBatItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected', 'mine', MineView)}
                {this.renderTabBatItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected', 'more', MoreView)}
            </TabNavigator>
        );
    }

    renderTabBatItem(title, iconName, selectedIconName, selectedTabName, component) {
        return(
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTabName}
                title={title}
                renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={{uri: selectedIconName}} style={styles.iconStyle} />}
                onPress={() => this.setState({ selectedTab: selectedTabName })}
                selectedTitleStyle={styles.selectedTitleStyle}
            >
                <Navigator
                    initialRoute={{name: {title}, component: component}}
                    configureScene={() => {
                            return Navigator.SceneConfigs.PushFromRight;
                        }}
                    renderScene={(route, navigator) => {
                            let Component = route.component;
                            return <Component {...route.passProps} navigator={navigator}/>
                        }}
                />
            </TabNavigator.Item>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    iconStyle:{
        width: Platform.OS === 'ios' ? 30 : 24,
        height:Platform.OS === 'ios' ? 30 : 24
    },

    selectedTitleStyle:{
        color:'orange'
    }
});