为啥需要 this.props.componentId？

Posted 2023-02-16

【中文标题】为啥需要 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。

【参考方案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 中需要它？它的目的是什么？我能从上面得到的只是它是需要的，而不是原因。