RN笔记-Navigator和TabNavigator

RN提供两种导航器:NavigatorIOS和Navigator,NavigatorIOS只适配iOS,而Navigator即适配iOS又适配安卓。以下为Navigator通用导航器和TabNavigator通用的TabBar切换器。附效果图

注意使用TabNavigator时需要以下操作:
打开终端,cd到工程根目录下,然后执行命令:

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

这样就可以获取到已封装好的TabBar框架.
在node_modules中能够查看到下载到本地的框架文件

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Platform, //判断当前运行的系统 Platform.OS === 'ios'
  Navigator
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

var Home = require('../Home/XMGHome');
var Shop = require('../Shop/XMGShop');
var Mine = require('../Mine/XMGMine');
var More = require('../More/XMGMore');

var Main = React.createClass({

  // 初始化函数(变量是可以改变的,充当状态机的角色)
  getInitialState() {
    return {
      selectedTab:'home'
    }
  },

  render() {
    return (
      
        { /*首页*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'home' })}}
          selected={this.state.selectedTab === 'home'}
          >
          {
              return Navigator.SceneConfigs.FloatFromBottom;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return ;
            }}
          />
        
        { /*商家*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'shop' })}}
          selected={this.state.selectedTab === 'shop'}
          >
            {
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return ;
              }}
            />
        
        { /*我的*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'mine' })}}
          selected={this.state.selectedTab === 'mine'}>
          {
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return ;
            }}
          />
        
        { /*更多*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'more' })}}
          selected={this.state.selectedTab === 'more'}
          >
            {
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return ;
              }}
            />
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  iconStyle: {
    width: 22,
    height: 22
  }
});

module.exports = Main;

搭建的框架效果图:

RN笔记-Navigator和TabNavigator_第1张图片
框架.png

你可能感兴趣的:(RN笔记-Navigator和TabNavigator)