如何在NavigatorIOS中的右键添加标签中的React Native

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或具有导航的类来呈现类，但不能同时使用两者。

任何帮助表示赞赏。

Answer 1

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

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

以下一段代码通过创建对渲染组件（ref="nav"）的引用并在两个回调函数中使用它来解决此问题。

Here你可以找到更多关于它。

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

我不明白问题的第二部分，你能指出一个具体的问题吗？