时间戳

首页 > 解决方案 > 为什么需要 this.props.componentId？

react-native - 为什么需要 this.props.componentId？

问题描述

为什么this.props.componentId需要？

它的目的是什么？

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

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

标签： react-nativereact-native-navigation

解决方案

这是库开发人员的博文中的详细答案。react-native-navigation

所以现在我们要启用以下行为：用户点击文本后，应用推送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;

在官方文档中，负责推送、弹出和更改导航的 Screen API 似乎可以通过Navigation总是期望 aprops.componentId获取对组件的引用的模块进行访问。

推荐阅读