javascript - 如何从外部 MeteorListView 文件调用 React-Native 导航器？

Question

这可能更像是一个 JavaScript 问题，而不是一个 React-Native/Meteor 问题:我正在向现有的 React Native 应用程序添加 Meteor 连接，但遇到了导航障碍。我以前有一个 ListView，它每行提供一个 onPress 函数来调用导航。为了与 Meteor 的 createContainer 协议(protocol)保持一致，我(在我的例子中)使用了“PuzzlesContainer”来代替 ListView，在单独的文件中，它引用

const PuzzlesContainer = ({ puzzlesReady }) => {
  return (
    <Puzzles
      puzzlesReady={puzzlesReady}
    />
  );
};
export default createContainer(() => {
  const handle = Meteor.subscribe('puzzles-list');
  return {
    puzzlesReady: handle.ready(),
  };
}, PuzzlesContainer);

此文件包含“Puzzles”文件，该文件也是一个包含 MeteorListView 的 const 函数:

const Puzzles = ({ puzzlesReady }) => {
  if (!puzzlesReady) {
    return null;//<Loading />;
  }else{

  return (
    <View style={launcherStyle.container}>
        <MeteorListView
            collection="puzzles"
            renderRow={
                (puzzle) =>
                <View >
                    <TouchableHighlight style={launcherStyle.launcher} onPress={()=>onSelect(puzzle.text)}>
                         <Text style={launcherStyle.text}>{puzzle.text}</Text>
                    </TouchableHighlight>
                </View>
. . .

我的问题是现在没有原始路由方案的上下文，所以当我调用时

this.props.navigator.push

它给出“未定义不是一个对象(评估'this.props.navigator')”。我该如何处理这个问题？

Answer 1

一种方法是查看新的 NavigationExperimental，它以 redux 方式处理 nagivator。

另一种方法是，尽管我不知道是否建议这样做，但通过将导航器组件分配给模块来全局化它。可以是这样的

// nav.js
let nav = null

export function setNav = _nav => nav = _nav

export function getNav = () => {
  if (nav) {
    return nav
  } else {
    throw "Nav not initialized error" 
  }
}

然后，当您第一次拿到导航器时，请执行以下操作

// component.js
import { Navigator } from 'react-native'
import { setNav } from './nav'

// ...
  renderScene={ (route, navigator) => {
    setNav(navigator)
    // render scene below
    // ...
  }}