如何从对象中访问 this.props？答案

【问题标题】：How to access this.props from within an object?如何从对象中访问 this.props？
【发布时间】：2018-09-20 05:48:47
【问题描述】：

我正在使用 react-navigation 库的 StackNavigator。我想要一个包含图标和动画文本的标题。但是，部分文本需要从this.props 确定，我遇到了一个问题：

static navigationOptions = {
    headerLeft: null,
    headerRight: (
            <View style={{flexDirection: 'row'}}>
                <Animation.Text animation='fadeInRight'
                                delay={2000}
                                duration={1500}
                                style={{
                                    fontFamily: 'Helvetica-Light',
                                    paddingRight: 5,
                                    paddingTop: 10
                                }}>Welcome {JSON.stringify(this.props.navigation.state.params.username)}</Animation.Text>
                <Icon
                    name='ios-contact-outline'
                    type='ionicon'
                    size={30}
                    color={'#77767c'}
                    style={{paddingRight: 5}}
                />
            </View>
    )
}

this.props 在这里未定义，但我不知道如何将对象绑定到 this 或者是否有可能。我还尝试将调用移至函数：

static navigationOptions = {
    headerLeft: null,
    headerRight: (
            <View style={{flexDirection: 'row'}}>
                <Animation.Text animation='fadeInRight'
                                delay={2000}
                                duration={1500}
                                style={{
                                    fontFamily: 'Helvetica-Light',
                                    paddingRight: 5,
                                    paddingTop: 10
                                }}>Welcome {this.getUsername}</Animation.Text>
                <Icon
                    name='ios-contact-outline'
                    type='ionicon'
                    size={30}
                    color={'#77767c'}
                    style={{paddingRight: 5}}
                />
            </View>
    )
}

getUsername() {
    return(JSON.stringify(this.props.navigation.state.params.username))
}

并在我的构造函数中将getUsername 绑定到this，但由于某种原因，该函数永远不会被调用。

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

您需要为navigationOptions 传递一个函数。请看示例here，考虑以下sn-p

static navigationOptions = props => {
  const { navigation } = props;
  const { state, setParams } = navigation;
  const { params } = state;
  // param has the required value
  return {
    headerLeft: null,
    headerRight: (
        <View style={{flexDirection: 'row'}}>
          ...
        </View>
     )
  }
}

希望这会有所帮助！

【讨论】：

这给我一个警告：“警告：函数作为 React 子级无效。如果您从渲染返回一个组件而不是，则可能会发生这种情况。或者您可能打算调用它函数而不是返回它。”
我曾经为header 部分在navigationOptions 中这样做过，比如navigationOptions: navigationOptions => ({ header: props => <Comp {...navigationOptions} {...props} /> })，让我看看。
嗨@lmotl3，我已经更新了答案，在react-navigation 示例中找到了一个示例。对不起上一个。请试试这个。
很高兴它有帮助！ :)

【解决方案2】：

你不能在静态方法中访问组件的 props，因为它们没有组件的上下文，因为它还没有被初始化。

我现在无法运行您的代码，但 react-navigation 的 repo 上的问题 here 可能会有所帮助。

基本上，他们建议将此 sn-p 添加到您的 componentDidMount...

this.navigation.setParams({
    username: this.props.username
})

...然后像这样在 headerRight 部分中传递一个函数

static navigationOptions = {
    ...
    headerRight: ({ state }) => {
        return {
            // access username as "state.params.username"
        }
    }
}

很遗憾，我现在无法运行您的代码，但也许这会有所帮助。

【讨论】：