如何將對Navigator的引用傳遞給renderScene？

Question

我一直在嘗試使用React Native，我無法將對導航器的引用傳遞到我正在渲染的場景中。 沒有導航器，NewsList項目不能觸發場景更改。

render: function() {
    return (
        <Navigator
            initialRoute={ { name: 'NewsList', index: 0 } }
            renderScene={ ( route, navigator ) => NewsList }
        />                                                      
    );                                                          
},

類似地，在渲染場景功能中，我需要將導航器傳遞給行渲染功能。

<UIExplorerPage noSpacer={true} noScroll={true}>
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
        onEndReached={this.onEndReached}
    />
</UIExplorerPage>

傳遞這樣的引用的慣用方法是什么？

Answer 1

像Colin提到的那樣，你需要將回調傳遞給你的列表項。 下面給出的是來自示例項目（UIExplorer）的代碼本身反應本身。

在這里，我們將navigator對象傳遞給NavMenu，它是列表組件。

var TabBarExample = React.createClass({
    // Other methods... blah blah
    renderScene: function(route, nav) {
        switch (route.id) {
          case 'navbar':
            return <NavigationBarSample navigator={nav} />;
          case 'breadcrumbs':
            return <BreadcrumbNavSample navigator={nav} />;
          case 'jumping':
            return <JumpingNavSample navigator={nav} />;
          default:
            return (
              <NavMenu
                message={route.message}
                navigator={nav}
                onExampleExit={this.props.onExampleExit}
              />
            );
        }
    },

    render: function() {
        return (
          <Navigator
            style={styles.container}
            initialRoute={{ message: "First Scene", }}
            renderScene={this.renderScene}
            configureScene={(route) => {
              if (route.sceneConfig) {
                return route.sceneConfig;
              }
              return Navigator.SceneConfigs.FloatFromBottom;
            }}
          />
        );
      }
});

在NavMenu組件中，我們在每個NavButton的onPress上傳遞回調。

class NavMenu extends React.Component {
  render() {
    return (
      <ScrollView style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: 'Swipe right to dismiss',
              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
            });
          }}
          text="Float in from right"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: 'Swipe down to dismiss',
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="Float in from bottom"
        />
        // Omitted rest of the NavButtons.
      </ScrollView>
     );
}

這是示例的鏈接 。

Answer 2

如果我正確理解您的問題，您說新聞列表項目組件需要引用導航器才能觸發導航事件。 這（IMO）是錯誤的方法。

相反，傳遞列表項回調。 回調是父新聞列表組件上的一個方法，它已經引用了您可以調用的導航器。 通過這種方式，您可以避免將導航器一直傳遞到組件層次結構中。

如果不清楚，我可以給出一個代碼示例:)

Answer 3

問題措辭有點模糊。 我通過向UIExplorerPage添加導航器解決了我的問題，例如<UIExplorerPage navigator={navigator} /> 。 可以使用this.props在UIExplorerPage中訪問屬性。