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

发布时间：2020-12-15 20:17:51 所属栏目：百科来源：网络整理

导读：我正在尝试向导航栏添加一个右键来推送视图.我想在Tab类中执行此操作.我使用导航示例的代码,但我无法使用右键工作.选项卡页面加载正常,但是当我单击右键时,我收到以下消息： message: undefined is not an object (evaluating 'this.props.navigator.push')"

我正在尝试向导航栏添加一个右键来推送视图.我想在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渲染类,但不能同时渲染两者.

任何帮助表示赞赏.

解决方法

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

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

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

Here你可以找到更多相关信息.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!