使用 Native Base 在 Native React 中实现页脚标签 [英] Implementing Footer Tabs in Native React using Native Base

问题描述

我正在使用 UI 的本机基础创建本机反应应用程序 (http://nativebase.io/docs/v2.0.0/components#footerTab).我使用的是footerTabs组件，我的代码如下

I am creating a native react application using native base for the UI (http://nativebase.io/docs/v2.0.0/components#footerTab). I am using the footerTabs component and my code is as follows

render() {
    return (

 <Container>
    <Header backgroundColor="#ECEFF1">
      <Button transparent>
            <Icon name='ios-menu' style={{color: 'black'}}/>
      </Button>
      <Title style={{color:'black'}}>Header</Title>
  </Header>

    <Content>
        <Profile/>
    </Content>

    <Footer backgroundColor="#212121">
      <FooterTab>
        <Button backgroundColor="#000" >
           <Icon name="ios-person" size={30} color="#900"/>
           <Text>Profile</Text>
        </Button>

         <Button>
              <Icon name="ios-search"/>
              <Text>Search</Text>
          </Button>

        <Button>
            <Icon name="ios-camera"/>
            <Text>Camera</Text>
        </Button>

        <Button>
             <Icon name="ios-apps"/>
             <Text>Apps</Text>
        </Button>

        <Button>
            <Icon active name="ios-navigate"/>
            <Text>Navigate</Text>
        </Button>

    </FooterTab>
    </Footer>
  </Container>
);
}

我为不同的功能创建了不同的 JS 文件，例如配置文件、搜索、应用程序等，并按如下方式导入它们.

I have created different JS files for different functionalities such as Profiles,Search,Apps ect.. and have imported them as follows.

import Profile from './Profile';

如何在页脚按钮上实现 onPress 功能以根据所选内容更改内容标签中的组件?

How do I implement the onPress functionality on the buttons of the footer to change the component in the content tag depending on what was selected?

 <Content>
    <Profile/>
</Content>

例如:如果我按下了搜索按钮，我希望个人资料标签被替换为其他按钮，同样如此.

For eg: If I pressed the search button I want the profile tag to be replaced with and similarly the same for the other buttons.

推荐答案

这里来自原生基础的 FooterTab 并没有像 iOS 中的 UITabBar 那样持久化实际的选项卡功能，它只是为了设计而持久化.您需要做的是，使用所有四个按钮在所有组件中保留页脚标记并相应地保持活动状态.要通过选择任何按钮来更改视图，您需要使用导航器替换当前视图，例如:

Here FooterTab from native base is not persist actual tab functionality like UITabBar in iOS, its only persist for design. What you need to do is, keep footer tag in all of your component with all four buttons and keep active accordingly. For changing view by selecting any button you need to replace current view by selected one using navigator like:

<Button onPress={()=> { this.props.navigator.replace({id:'component name'}) }}>

并且在您的导航器组件中，您应该根据路由负载中的 id 值在 renderScene 方法中定义所有必需的组件.如果你想要 TabBar 的实际功能，那么你可以使用这个第三方模块 react-native-标签导航器.谢谢！

and in your navigator component you should define all required components in renderScene method on the basis of id value in route payload. If you want actual functionality as TabBar work then you can use this third party module react-native-tab-navigator. Thanks!

这篇关于使用 Native Base 在 Native React 中实现页脚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！