如何在类组件中使用反应导航道具？答案

【问题标题】：How can I use react navigation props in class component?如何在类组件中使用反应导航道具？
【发布时间】：2018-10-19 01:42:22
【问题描述】：

我创建了一个分享图标，点击分享的 pdf 或图像文件在社交帐户（如 facebook、whatsapp、gmail 等）上。我想在类组件中传递可共享文件的 URL 链接，但出现错误。如果我对 URL 进行硬编码，那么它可以正常工作，但是如何传递从反应导航收到的 URL？

工作代码：

    import React, { Component } from 'react';
    import { Share, View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

    const shareOptions = {
        title: 'Download Brochure',
        url: 'https://cpbook.propstory.com/upload/project/brochure/5bc58ae6ca1cc858191327.pdf'
    }

    export default class Screen extends Component {

    onSharePress = () => Share.share(shareOptions);

    render() {
     return (
    <View> 
    <Text style={styles.infoTitle}>Share: </Text>
                            <TouchableOpacity onPress={this.onSharePress}>
                                <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/>
                            </TouchableOpacity>
    </View>
    }

    }

上面的代码工作正常，但下面的代码给出错误，说shareOptions 未定义。我怎样才能克服这个问题？我想在shareOptions 中传递文件URL。我从反应导航道具中获取文件网址，即brochure。

代码：

import React, { Component } from 'react';
import { Share, View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Screen extends Component {

onSharePress = () => Share.share(shareOptions);  <---Getting error here shareOptions undefined

render() {

const project = this.props.navigation.getParam('project', null);

let { brochure } = project;

const shareOptions = {
  title: 'Download Brochure',
  url: brochure
}

return (
<View> 
<Text style={styles.infoTitle}>Share: </Text>
                        <TouchableOpacity onPress={this.onSharePress}>
                            <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/>
                        </TouchableOpacity>
</View>
)

}

如何克服上述问题以及如何传递道具，即上述情况下的文件 URL，URL 位于 brochure 道具中。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

只需将 shareOptions 对象作为参数传递给 onSharePress 函数，并在 onSharePress 事件处理函数中获取 shareOptions

import React, { Component } from 'react';
import { Share, View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class Screen extends Component {

   onSharePress = (shareOptions) => {
      Share.share(shareOptions);  
   }

   render() {
      const { navigation } = this.props;
      const project = navigation.getParam('project', null);
      const { brochure } = project;
      const shareOptions = {
         title: 'Download Brochure',
         url: brochure
      }

   return (
     <View> 
       <Text style={styles.infoTitle}>Share: </Text>
         <TouchableOpacity onPress={() => this.onSharePress(shareOptions)}>
            <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/>
         </TouchableOpacity>
     </View>
   )
  }
}

【讨论】：

onPress={() => this.onSharePress(shareOptions)}和onPress={this.onSharePress(shareOptions)}有什么区别
如果你使用这个 onPress={this.onSharePress(shareOptions)} 那么这个函数会在组件渲染时被调用，但是 onPress={() => this.onSharePress(shareOptions)} 这个只会被调用当你按下
好的，今天学到了一些新东西。你能告诉我这是什么术语吗？这是处理事件还是箭头函数？你能告诉我它到底是什么吗？这样我就可以更多地研究这个
当您将参数传递给事件处理函数时，您应该执行 () => this.handle(arg1, arg2);如果你不向函数传递参数，那么 this.handle 就是你要做的
你能帮帮我吗-> stackoverflow.com/questions/53045415/…

【解决方案2】：

您没有将 shareOptions 传递给您的 share 方法，因此它是未定义的。

您可以通过多种方式重构代码，下面您可以看到更可行的方法。

由于您的渲染函数没有使用您的 return 语句上方的任何逻辑，我只是将所有这些迁移到 onSharePress 函数中，如果这些不同，那么您自然会希望通过参数传递它。

export default class Screen extends Component {

    onSharePress = () => {

        const project = this.props.navigation.getParam('project', null);

        let { brochure } = project;

        const shareOptions = {
            title: 'Download Brochure',
            url: brochure
        }

        Share.share(shareOptions);
    } 

    render() {

        return (
            <View> 
                <Text style={styles.infoTitle}>Share: </Text>
                <TouchableOpacity onPress={this.onSharePress>
                    <Icon style={{paddingLeft: 10, paddingTop: 10}}name="md-share" size={30} color="black"/>
                </TouchableOpacity>
            </View>
        )

    }
}

【讨论】：