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

【问题标题】：How can I call a React-Native navigator from an outside MeteorListView file?如何从外部 MeteorListView 文件调用 React-Native 导航器？
【发布时间】：2016-12-15 03:00:52
【问题描述】：

这可能更像是一个 javascript 问题，而不是 react-native/meteor 问题：我正在将 Meteor 连接添加到现有的 React Native 应用程序，但在导航方面遇到了障碍。我以前有一个 ListView，它为每一行提供一个 onPress 函数来调用导航。为了与 Meteor 的 createContainer 协议保持一致，我使用（在我的情况下）一个“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'）”。我该如何处理？

【问题讨论】：

标签： javascript meteor react-native

【解决方案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
    // ...
  }}

【讨论】：

抱歉耽搁了...我喜欢全球化导航器的建议，并将进一步研究。我最初尝试修改我的 nav.js（这是一个“类......扩展 React.Component”结构）正在抛出错误——但我认为你已经引导我走上了正确的道路。当我让它工作时，我会标记它是正确的！谢谢
通过在 JSX 中传递导航器来设法做到这一点，并将其作为答案发布。不过，对于这些想法 +1...我学到了很多关于 js 全球化的知识！
很高兴你得到它:)

【解决方案2】：

尽管我很喜欢全球化导航的建议，a) 我从来没有成功过，b) 这似乎不是最佳实践。对于其他可能遇到此问题的人，我终于通过在每个 JSX 标记中传递导航道具成功了——所以：

 <PuzzlesContainer 
    navigator={this.props.navigator} 
    id={'puzzle contents'}
 />

在父（反应组件）文件中，然后

<Puzzles
    puzzlesReady={puzzlesReady} 
    navigator={navigator} 
    id={'puzzle contents'}
/>

在第二个“const”（Meteor 容器）文件中，并使用它

<TouchableHighlight onPress={()=>navigator.replace({id: 'puzzle launcher', ... })}>

在第三个 'const' (MeteorListView) 文件中。希望它可以帮助某人！

【讨论】：

哦，我完全忘记了。您可以使用“上下文”而不是传递道具。这样，即使在中间组件中不需要它，也不会传递 props。