在 React 原生应用的每个页面上包含 TabBarIOS

Question

在我的反应本机应用程序中，我在主页组件中定义了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} />
      );
    },

导航到主页上列表视图行上的下一个组件按下：

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

Answer 1

我想

您希望 Tabbar 显示在每个视图中，对吧？您需要一个路由器来帮助它提高效率。

尝试使用 react-native-router-flux 来支持您，此路由器解决方案支持选项卡栏。

Answer 2

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

TabBarIOS
  Navigator
    Feed
  Navigator
    Home
  Navigator
    Profile

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