如何将 Navigator 的引用传递给 renderScene？答案

【问题标题】：How do I pass reference to Navigator into renderScene?如何将 Navigator 的引用传递给 renderScene？
【发布时间】：2015-06-16 17:49:01
【问题描述】：

我一直在尝试使用 React Native，但在将导航器的引用传递到我正在渲染的场景中时遇到了麻烦。如果没有导航器，NewsList 项目将无法触发场景切换。

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

同样，在渲染场景函数中我需要将 navigator 传递给行渲染函数。

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

传递这样的引用的惯用方式是什么？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

就像 Colin 提到的，您需要将回调传递给您的列表项。下面给出的是来自 react native 的示例项目 (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>
     );
}

这是示例的link。

【讨论】：

字面上花了几个小时，这个答案很清楚，谢谢你把我从导航器的地狱里救了出来，导航器需要一篇博文来教人们如何使用它

【解决方案2】：

这个问题的措辞有点含糊。我通过将导航器添加到 UIExplorerPage 解决了我的问题，例如 <UIExplorerPage navigator={navigator} />。可以使用this.props 在 UIExplorerPage 中访问属性。

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您是说您的新闻列表项组件需要对导航器的引用才能触发导航事件。这（IMO）是错误的方法。

相反，将列表项传递给回调。回调是父新闻列表组件上的一个方法，并且它已经具有对您可以调用的导航器的引用。通过这种方式，您可以避免将导航器一直传递到组件层次结构中。

如果不清楚，我可以给出一个代码示例:)

【讨论】：