在视图中添加选项卡组件 [英] Adding tab component in a view

问题描述

我是本机反应的新手，我正在努力理解它.这可能是一个非常基本的问题.

I am new to react native, and I am struggling to understand it. This may be a very basic question.

我有一个屏幕，它由页面顶部的 searchbar 和其下方的 Tabs 组成.在选项卡中导航时，不应移除搜索栏(位于顶层).

I have a screen and it consists of a searchbar on top of the page and below it there are Tabs. While navigating through the tabs, the searchbar should not be removed (being at the top level).

主屏幕:

export default class MainScreen extends Component {
   render() {
      return (
         <View>
            <Text>My search bar here</Text>

            <TabBar></TabBar>
         </View>
      );
   }
 }

标签栏:

const routeConfiguration = {
  TabEvents: { screen: TabEvents },
  TabPeople: { screen: TabPeople },
  TabGroups: { screen: TabGroups },
  TabMap: { screen: TabMap },
}

const tabBarConfiguration = {
    tabBarOptions:{
       // some options
    }
}
export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)

运行应用程序时，只显示文本我的搜索栏在这里没有标签.

When running the app, only the text is being displayed My search bar here without the tabs.

推荐答案

创建 Tab 导航器的方法如下:

The way to create a Tab navigator is the following:

tabNavigator.js

tabNavigator.js

    import React from 'react'
    import { Platform } from 'react-native'
    import { TabNavigator, StackNavigator } from 'react-navigation'

    const Tabs = TabNavigator({
      Home:{ //this is the name of the screen, by default the first screen that you want to show is called Home
        screen: component , //this is the component that you want to show in the screen
        navigationOptions: {
          tabBarLabel: 'some label', //this will be located as a title for the tab
          tabBarIcon: ({ tintColor }) => <i> some icon </i>, //this allow you to show a icon in the tab
          //the following options are to customize the header, maybe you don't need this.
          title: 'some title',
          headerStyle:{
            backgroundColor: 'blue' // color for the header
          },
          headerTitleStyle:{
            color: 'white' // color for the text on the header
          },
          header: <YourHeader/>
        }
      },
      // if you need add some other tab repeat the same pattern here OtherScreen:{ ...}
      },{
      //this are options to customize the tab itself, I added some good ones.
      tabBarOptions: {
        activeTintColor: Platform.OS === 'ios' ? primary : white,
        style:{
          height:40,
          backgroundColor: Platform.OS === 'ios' ? white : primary,
          shadowRadius: 6,
          shadowOpacity: 1,
          shadowColor: 'rgba(0,0,0,0.24)',
          shadowOffset: {
              width: 0,
              height: 3
          }
        }
      }
      })
export default Tabs

mainScreen.js

mainScreen.js

import React, { Component} from 'react'
import Tabs from './tabNavigator'

export default class MainScreen extends Component {
   render() {
      return (
         <View>
            <Tabs/>
         </View>
      );
   }
 }

希望能帮到你.

这篇关于在视图中添加选项卡组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！