React Navigation--TabNavigator 详细的例子

/**
 * Created by YiBing on 2017/5/5.
 * 本程序效果：类似Android中的ViewPager--有2个页面，可以随手势来回切换，也可以点击Tab切换。
 * API Definition -- TabNavigator(RouteConfigs,TabNavigatorConfig)。
 *
 * RouteConfigs -- 和StackNavigator的RouteConfigs一样，可以看上一篇文章（React Navigation--StackNavigator 详细的例子http://www.52php.cn/article/p-zbzcwleq-bps.html）。
 *
 * TabNavigatorConfig --
 *   1. tabBarComponent - component to use as the tab bar,*      e.g. TabBarBottom (this is the default on iOS),*          TabBarTop (this is the default on Android)
 *   2. tabBarPosition - position of the tab bar,can be 'top' or 'bottom'
 *   3. swipeEnabled - whether to allow swiping between tabs
 *   4. animationEnabled - whether to animate when changing tabs
 *   5. lazy - whether to lazily render tabs as needed as opposed to rendering them upfront
 *   6. tabBarOptions - configure the tab bar.
 *      tabBarOptions for TabBarBottom (default tab bar on iOS):
 *          (1) activeTintColor - label and icon color of the active tab
 *          (2) activeBackgroundColor - background color of the active tab
 *          (3) inactiveTintColor - label and icon color of the inactive tab
 *          (4) inactiveBackgroundColor - background color of the inactive tab
 *          (5) showLabel - whether to show label for tab,default is true
 *          (6) style - style object for the tab bar
 *          (7) labelStyle - style object for the tab label
 *          Example:
 *            tabBarOptions: {
 *                  activeTintColor: '#e91e63',*                  labelStyle: {
 *                      fontSize: 12,*                  },*                  style: {
 *                      backgroundColor: 'blue',*            }
 *      tabBarOptions for TabBarTop (default tab bar on Android):
 *          (1) activeTintColor - label and icon color of the active tab
 *          (2) inactiveTintColor - label and icon color of the inactive tab
 *          (3) showIcon - whether to show icon for tab,default is false
 *          (4) showLabel - whether to show label for tab,default is true
 *          (5) upperCaseLabel - whether to make label uppercase,default is true
 *          (6) pressColor - color for material ripple (Android >= 5.0 only)
 *          (7) pressOpacity - opacity for pressed tab (iOS and Android < 5.0 only)
 *          (8) scrollEnabled - whether to enable scrollable tabs
 *          (9) tabStyle - style object for the tab
 *          (10)indicatorStyle - style object for the tab indicator (line at the bottom of the tab)
 *          (11)labelStyle - style object for the tab label
 *          (12)iconStyle - style object for the tab icon
 *          (13)style - style object for the tab bar
 *          Example:
 *            tabBarOptions: {
 *                  labelStyle: {
 *                      fontSize: 12,*            }
 *   7. initialRouteName - The routeName for the initial tab route when first loading
 *   8. order - Array of routeNames which defines the order of the tabs
 *   9. paths - Provide a mapping of routeName to path config,which overrides the paths set in the routeConfigs.
 *   10.backBehavior - Should the back button cause a tab switch to the initial tab? If yes,set to initialRoute,*      otherwise none. Defaults to initialRoute behavior.
 *
 * Screen Navigation Options --
 *   1. title - Generic title that can be used as a fallback for headerTitle and tabBarLabel
 *   2. tabBarVisible - True or false to show or hide the tab bar,if not set then defaults to true
 *   3. tabBarIcon - React Element or a function that given { focused: boolean,tintColor: string }
 *                   returns a React.Element,to display in tab bar
 *   4. tabBarLabel - Title string of a tab displayed in the tab bar or React Element or a function that given
 *                    { focused: boolean,tintColor: string } returns a React.Element,to display in tab bar.
 *                    When undefined,scene title is used. To hide,see tabBarOptions.showLabel in the previous section.
 *
 *
 * Navigator Props --
 *   The navigator component created by TabNavigator(...) takes the following props:
 *      1. screenProps - Pass down extra options to child screens and navigation options,for example:
 *         const TabNav = TabNavigator({
 *              // config
 *          });
 *          <TabNav screenProps={
 *                // this prop will get passed to the screen components as this.props.screenProps
 *              }
 *           />
 */

import React from 'react';

import {
    Button,ScrollView,Text,StyleSheet,} from 'react-native';

import {
    TabNavigator,} from 'react-navigation';

class MyHomeScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Home',// Note: By default the icon is only shown on iOS. Search the showIcon option below.
        tabBarIcon: ({tintColor}) => (
            <Image
                source={require('./img/notif-icon.png')}
                style={[styles.icon,{tintColor: tintColor}]}
            />
        ),};

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        );
    }
}

class MyNotificationsScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Notifications',tabBarIcon: ({tintColor}) => (
            <Image
                source={require('./img/notif-icon.png')}
                style={[styles.icon,};

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,height: 26,},});

const SimpleTabNavigator = TabNavigator(
    {
        Home: {
            screen: MyHomeScreen,Notifications: {
            screen: MyNotificationsScreen,{
        tabBarOptions: {
            activeTintColor: '#ff00ff',}
);

export default SimpleTabNavigator;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!