无法在 React Native Navigator 中渲染新组件答案

【问题标题】：Cant render new component in React Native Navigator无法在 React Native Navigator 中渲染新组件
【发布时间】：2016-02-28 16:57:21
【问题描述】：

我遇到了onRightButtonPress 没有将新路线推送到导航器的问题。好像我也没有navigator 对象，因为我没有任何道具。我错过了什么？当我点击触发onRightButtonPress函数的“创建”按钮时，我想渲染另一个视图。

export default class App extends Component {
  render() {
    const addWorkoutRoute = {
      title: 'Add workout',
      component: AddWorkout,
    };

    return (
      <Provider store={store}>
        <NavigatorIOS
          style={styles.container}
          initialRoute={{
            rightButtonTitle: 'Create',
            onRightButtonPress: () => this.props.navigator.push(addWorkoutRoute),
            title: 'Workout overview',
            component: WorkoutList,
          }}
        />
      </Provider>
    )
  }
}

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

尝试在 NavigatorIOS 上设置 ref，然后推送到 ref：

 <NavigatorIOS
    ref="nav"
    style={{ flex: 1 }}
    initialRoute={{
        rightButtonTitle: 'Create',
        onRightButtonPress: () => this.refs.nav.push(addWorkoutRoute),
        title: 'Workout overview',
        component: WorkoutList,
      }}
    />

请注意，它现在正在向 ref 推送：

onRightButtonPress: () => this.refs.nav.push(addWorkoutRoute),

我认为这是因为没有作为导航器的道具，因为它仍然是导航器的实例。

我设置了一个基本的实现here。

https://rnplay.org/apps/J_4iGg

【讨论】：