在 React 本机应用程序的每个页面上都包含 TabBarIOS？答案

【问题标题】：Include TabBarIOS on each page of React native app?在 React 本机应用程序的每个页面上都包含 TabBarIOS？
【发布时间】：2016-10-04 22:11:51
【问题描述】：

在我的 react 本机应用程序中，我在 HomePage 组件中定义了 TabBarIOS 选项卡。单击各种选项卡后，将调用从与这些选项卡关联的其他类加载组件的函数。但是，如果我在这些组件中使用导航器来推送新屏幕，TabBarIOS 就会消失（如预期的那样），并且我无法弄清楚如何重新处理它，以便它在这些组件的所有子屏幕上仍然可见。我已经包含了相关代码；任何建议将不胜感激！

TabBarIOS 渲染：

  render: function() {
return (
  <TabBarIOS
    tintColor="white"
    barTintColor="#cee4dc">
    <Icon.TabBarItemIOS
      title="PROFILE"
      selected={this.state.selectedTab === TABS.profile}
      iconName="ios-profile"
      selectedIconName="ios-profile"
      onPress={() => {
        this.setState({
          selectedTab: TABS.profile,
        });
      }}>
     {this._renderProfile()}
    </Icon.TabBarItemIOS>
    <Icon.TabBarItemIOS
      title="HOME"
      selected={this.state.selectedTab === TABS.home}
      iconName="ios-home"
      selectedIconName="ios-home"
      onPress={() => {
        this.setState({
          selectedTab: TABS.home,
        });
      }}>
     {this._renderHome()}
    </Icon.TabBarItemIOS>
    <Icon.TabBarItemIOS
      title="FEED"
      selected={this.state.selectedTab === TABS.feed}
      iconName="ios-feed"
      selectedIconName="ios-feed"
      onPress={() => {
        this.setState({
          selectedTab: TABS.feed,
        });
      }}>
     {this._renderFeed()}
    </Icon.TabBarItemIOS>
  </TabBarIOS>
);
},

渲染特定的标签组件：

  _renderFeed: function(){
      return(
        <Feed navigator = {this.props.navigator} />
      );
    },
 _renderHome: function(){
      return(
        <Home navigator = {this.props.navigator} />
      );
    },
 _renderProfile: function(){
      return(
        <Profile navigator = {this.props.navigator} />
      );
    },

ListView rowPressed 后导航到 HomePage 中的下一个组件：

rowPressed: function(hunt) {
    this.props.navigator.push({
        title: "Item",
        component: ItemOverview,
        passProps: {
            item: item,
        }
    });
},

【问题讨论】：

标签： javascript reactjs navigation react-native tabbar

【解决方案1】：

我想你希望 Tabbar 会显示在每个视图中，对吧？你需要一个路由器来帮助它更高效。

尝试使用react-native-router-flux来支持你，这个路由器方案已经支持tabbar了。

【讨论】：

【解决方案2】：

如果您希望本机 iOS 选项卡栏在每个视图上持续存在，那么它需要在视图层次结构中高于导航器，因此基本上不是 Navigator -> TabBarIOS 您将拥有一个新的 @987654324 @ 在每个 _render* 函数中使您的视图层次结构如下所示：

TabBarIOS
  Navigator
    Feed
  Navigator
    Home
  Navigator
    Profile

如果您认为这不是一个好的解决方案，我建议您查看NavigationExperimental。目前它的记录很差，所以the examples 可能是你最好的选择。

【讨论】：