React Native Navigator右键操作

Question

使用Navigator，我需要一个右键来修改顶级视图的状态。 使用Navigator和自定义NavigationBarRouteMapper，我可以为按钮操作实现除之外的所有。

使用此Navigator实施：

         <Navigator
            ref='navigator'
            style={styles.appContainer}
            initialRoute={{name: initialRootView.title, component: initialRootView.view}}
            navigationBar={
              <Navigator.NavigationBar
                routeMapper={NavigationBarRouteMapper}
                style={styles.navBar}
              />
            }
            configureScene={() => {
                return Navigator.SceneConfigs.FloatFromRight;
            }}
            renderScene={(route, navigator) => {
                if (route.component) {
                    // add `navigator` and `cache` as props to any top-level component that gets pushed
                    // onto the navigation stack.
                    return React.createElement(route.component, { navigator: navigator, cache: this.state.cache, ...route.props });
                }
            }}
          />

这是NavigationBarRouteMapper：

var NavigationBarRouteMapper = {
  RightButton: function(route, navigator, index, navState) {
    console.log(route.component);
    return (
      <TouchableOpacity
        onPress={route.component.onRightButton}
        style={{width: 100, height: 44, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Right Button</Text>
      </TouchableOpacity>
    );
  },
};

这会正确呈现正确的按钮，而我的顶级组件有一个函数onRightButton。但是为什么它永远不会被称为？

在RightButton的上下文中进行一些调试，route.component.prototype.hasOwnProperty('onRightButton')会返回true，但route.component.hasOwnProperty('onRightButton')会返回false。这怎么可能？返回的route.component引用有什么奇怪的？

任何帮助表示感谢。

Answer 1

您可以在路线中传递任何您想要的东西。例如：

initialRoute={{name: initialRootView.title, component: initialRootView.view onRightButton: (() => {console.log('hi')})}}

然后你可以通过以下方式在RightButton中访问它：

onPress={route.onRightButton}

在您的示例中，您尝试从组件的React Component Class访问一个函数，该函数不会公开该函数。

Answer 2

实质上，您希望在导航栏按钮上注入一个功能。

我已经回答了类似的问题。

这是答案： https://stackoverflow.com/a/39071126/579497