如何在React Native的選項卡中的NavigatorIOS中添加右鍵

Question

我正在嘗試向導航欄添加一個右鍵來推送視圖。 我想在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渲染類，但不能同時渲染兩者。

任何幫助表示贊賞。

Answer 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(); }
      });}
  }}
/>

我不明白問題的第二部分，您是否可以指出具體問題？