繁体   English   中英

如何在React Native的选项卡中的NavigatorIOS中添加右键

How to add Right Button in NavigatorIOS in Tabs for React Native

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试向导航栏添加一个右键来推送视图。 我想在Tab类中执行此操作。 我使用导航示例的代码,但我无法使用右键工作。 选项卡页面加载正常,但是当我单击右键时,我收到以下消息:

message: undefined is not an object (evaluating 'this.props.navigator.push')"

主app.js

    'use strict';

    var React = require('react-native');
    var Tabs = require("./Tabs");

    var {AppRegistry} = React;

    var App = React.createClass({
      render: function () {
        return (
          <Tabs/>
        )
      }
    });

    AppRegistry.registerComponent('App', () => App);

这是tabs.js

    'use strict';

    var React = require('react-native');
    var {
      NavigatorIOS,
      StyleSheet,
      TabBarIOS,
      Text,
      View
    } = React;
    var TabBarItemIOS = TabBarIOS.Item;

    var Search = require("./Search");
    var Invites = require("./Invites");
    var EmptyPage = React.createClass({

      render: function() {
        return (
          <View style={styles.emptyPage}>
            <Text style={styles.emptyPageText}>
              {this.props.text}
            </Text>
          </View>
        );
      },

    });

    var TabBarExample = React.createClass({

      statics: {
        title: '<TabBarIOS>',
        description: 'Tab-based navigation.'
      },

      getInitialState: function() {
        return {
          selectedTab: 'redTab',
          notifCount: 0,
          presses: 0,
        };
      },

      render: function() {
        return (
          <TabBarIOS
            selectedTab={this.state.selectedTab}>
            <TabBarItemIOS
              name="blueTab"
              icon={_ix_DEPRECATED('favorites')}
              accessibilityLabel="Blue Tab"
              selected={this.state.selectedTab === 'blueTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
              }}>
              <NavigatorIOS
                style={styles.natigator}
                initialRoute={{
                  component: Search,
                  title: Search.title,
                }}
                />
            </TabBarItemIOS>
            <TabBarItemIOS
              accessibilityLabel="Red Tab"
              name="redTab"
              icon={_ix_DEPRECATED('history')}
              badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                  notifCount: this.state.notifCount + 1,
                });
              }}>
              <NavigatorIOS
                style={styles.natigator}
                initialRoute={{
                  component: Invites,
                  title: Invites.title,
                  rightButtonTitle: 'New Invite',
                  onRightButtonPress: () => {

                                              this.props.navigator.push({
                                               title: "test",
                                               component: EmptyPage,
                                               rightButtonTitle: 'Cancel',
                                               onRightButtonPress: () => {this.props.navigator.pop();}
                                             });}
                }}
                />
            </TabBarItemIOS>
          </TabBarIOS>
        );
      },

    });

    var styles = StyleSheet.create({

      natigator: {
        flex: 1,
      },
      tabContent: {
        flex: 1,
        alignItems: 'center',
      },
      tabText: {
        color: 'white',
        margin: 50,
      },
    });

    // This is needed because the actual image may not exist as a file and
    // is used by the native code to load a system image.
    // TODO(nicklockwood): How can this fit our require system?
    function _ix_DEPRECATED(imageUri) {
      return {
        uri: imageUri,
        isStatic: true,
      };
    }

    module.exports = TabBarExample;

导航有些不对,我不明白如何加载View和NavigationIOS; 似乎我只能使用带有导航的View或Class渲染类,但不能同时渲染两者。

任何帮助表示赞赏。

1 个回复

发生崩溃是因为此对象没有导航器属性。

导航器作为属性传递给NavigatorIOS中的每个组件(在您发布的组件为Invites的代码中),如果您需要从当前组件访问它,您可以使用ref指向您正在渲染的NavigatorIOS 。

下面的代码通过创建渲染组件( ref="nav" )的ref="nav"并在两个回调函数中使用它来解决此问题。

在这里你可以找到更多相关信息。

<NavigatorIOS
  ref="nav"
  style={styles.natigator}
  initialRoute={{
    component: Invites,
    title: Invites.title,
    rightButtonTitle: 'New Invite',
    onRightButtonPress: () => {
      this.refs.nav.navigator.push({
        title: "test",
        component: EmptyPage,
        rightButtonTitle: 'Cancel',
        onRightButtonPress: () => { this.refs.nav.navigator.pop(); }
      });}
  }}
/>

我不明白问题的第二部分,您是否可以指出具体问题?

1 在React-Native中,如何为TabBarIOS中的每个NavigatorIOS选项卡调用popToTop()?

我正在构建的应用程序具有一个根客户端对象,该对象会影响该应用程序的所有后续视图。 我希望用户能够更改客户端并重置所有选项卡,即popToTop()并适当地更新客户端。 我有一个带有4个选项卡的TabBarIOS组件,每个选项卡都是一个NavigatorIOS组件,用于管理后续的ListV ...

3 如何在React-Native中重新呈现选项卡

我有一个React-Native闪卡应用程序,它使用两个选项卡,一个Home选项卡和一个New Deck选项卡启动。 “主页”选项卡是默认选项卡,您可以按或滑动到“新建工作区”选项卡。 “主页”选项卡显示用户当前已保存的所有卡组。 在New Deck选项卡上,我让用户输入新牌 ...

4 如何使用react-navigation在react-native中添加搜索栏和选项卡按钮

我有一个登录屏幕,当用户登录时,他们被带到类似于上图所示的屏幕。 在此屏幕中,我有一个tabNavigator,其中包含5个屏幕的标签,类似于上图所示。 它还有一个带有搜索栏的标题。 仅应在5个标签中的4个中显示此标题,并且我需要在第5个标签中显示一个不同的标题。 有没有办 ...

9 如何在 react-bootstrap 的选项卡中添加样式?

在我的项目中,我使用 react-bootstrap 中的选项卡。 我想要做的是在选定的选项卡中获得一个底部边框。 但我得到的是 下面给出的是我的 viewTicket.scss 文件 ViewTicket.scss 当我添加border:none; 然后它看起来像下面 如何在我的 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM