使用 Native Base 在 Native React 中实现页脚选项卡答案

【问题标题】：Implementing Footer Tabs in Native React using Native Base使用 Native Base 在 Native React 中实现页脚选项卡
【发布时间】：2017-06-25 01:16:10
【问题描述】：

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

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 文件，例如 Profiles、Search、Apps 等..并导入它们如下。

import Profile from './Profile';

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

 <Content>
    <Profile/>
</Content>

例如：如果我按下搜索按钮，我希望将配置文件标签替换为其他按钮，类似地。

【问题讨论】：

标签： react-native react-redux native-base

【解决方案1】：

来自本机基础的FooterTab 并不像iOS 中的UITabBar 那样保留实际的选项卡功能，它只保留用于设计。您需要做的是，使用所有四个按钮在所有组件中保留页脚标记，并相应地保持活动状态。要通过选择任何按钮来更改视图，您需要使用导航器将当前视图替换为选定的视图，例如：

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

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

【讨论】：

【解决方案2】：

您为什么不让每个 Button 导航到新页面，而不是替换内容？

假设您在“个人资料”标签上。你可以这样做：

import FooterWrapper from './FooterWrapper'

<Footer>
  <FooterWrapper tab='profile' navigator={this.props.navigator} />
</Footer>

然后在您的 FooterWrapper 中（我刚刚处理了两个选项卡的情况）：

constructor(props) {
  super(props)
  this.state = {
    profileTab: this.props.tab === 'profile',
    searchTab: this.props.tab === 'search',
  }
} 

navToProfilePage() {
  this.props.navigator.push({
    id: 'profile',
    tab: 'profile',
  })
}

navToSearchPage() {
  this.props.navigator.push({
    id: 'search',
    tab: 'search',
  })
}

render() {
  return (
    <FooterTab>
      <Button active={this.state.profileTab} onPress={() => this.navToProfilePage()}>
          Profile
          <Icon name='ios-person' size={30} color='#900' />
      </Button> 
      <Button active={this.state.searchTab} onPress={() => this.navToSearchPage()}>
          Search
          <Icon name='ios-search' />
      </Button>
    </FooterTab>
  )
}

【讨论】：

【解决方案3】：

好的，这就是我如何得到它我使用内容标签中的 renderContent 方法根据单击按钮时的状态变化生成视图。

 <Content>
        {this._renderContent(this.state.selectedTab)}        
 </Content>

selectedTab 是一个状态变量，其状态是使用 onPress 方法中的 this.setState 设置的。 renderContent 有一个 if 函数，它检查选定的选项卡并返回适当的视图。我也尝试了导航方法，但这看起来更干净。

 _renderContent = (Tab: string,) => {
    if(this.state.selectedTab==="Profile"){
    return (
      <Profile/>
    );
    }
    else if(this.state.selectedTab==="Search"){

    }
}

【讨论】：