为什么需要 this.props.componentId？答案

【问题标题】：Why is this.props.componentId needed?为什么需要 this.props.componentId？
【发布时间】：2019-10-12 18:44:44
【问题描述】：

为什么需要this.props.componentId？

它的目的是什么？

为什么我们不能在不需要该 ID 的情况下使用该库？

react-navigation 不需要这样的东西，react-native-navigation v1 没有使用这样的东西。那么为什么 v2 需要并使用它呢？我问的原因首先是要理解它，其次是看看我是否可以跳过这个，因为现在我不能使用 saga 中的 RNN v2。

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

这是来自react-native-navigation 库developer 的blogpost 的详细答案。

所以现在我们要启用以下行为：用户点击文本后，应用推送ViewPost 屏幕。稍后，将相同的功能附加到列表项而不是文本将非常容易。要将新屏幕推送到此屏幕的导航堆栈中，我们将使用Navigation.push。 在新的 API 中，此方法期望接收可以在 props.componentID 中找到的当前 componentId。所以在PostsList.js 中我们创建了一个pushViewPostScreen 函数并将其附加到Text 的onPress 事件中。

import React, {PureComponent} from 'react';
import {View, Text} from 'react-native-ui-lib';
import PropTypes from 'prop-types';
import {Navigation} from 'react-native-navigation';

class PostsList extends PureComponent {

  static propTypes = {
    navigator: PropTypes.object,
    componentId: PropTypes.string
  };

  constructor(props) {
    super(props);

    this.pushViewPostScreen = this.pushViewPostScreen.bind(this);
  }

  pushViewPostScreen() {
    // We pass the componentId to Navigation.push
    // to reference the which component will be pushed
    // to the navigation stack

    Navigation.push(this.props.componentId, {
      component: {
        name: 'blog.ViewPost',
        passProps: {
          text: 'Some props that we are passing'
        },
        options: {
          topBar: {
            title: {
              text: 'Post1'
            }
          }
        }
      }
    });
  }



  render() {
    return (
      <View flex center bg-blue60>
        <Text onPress={this.pushViewPostScreen}>Posts List Screen</Text>
      </View>
    );
  }
}

export default PostsList;

在official docs 中，似乎可以通过Navigation 模块访问负责推送、弹出和更改导航的Screen API，该模块总是期望props.componentId 来获取对组件的引用。

【讨论】：

谢谢，但我的问题仍然存在。为什么在新 API 中需要它？它的目的是什么？我能从上面得到的只是它是需要的，而不是原因。