Question

这可能是一个javascript问题，而不是反应原生/流星问题：我正在将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

它给出了“undefined不是一个对象（评估'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
    // ...
  }}

Answer 2

尽管我喜欢全球化导航的建议，但是我从来没有设法做到这一点，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）文件中。希望它可以帮到某人！

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

2 个答案: