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

我不明白問題的第二部分，你能指出一個具體的問題嗎？