javascript - 如何从一个对象中访问 this.props？

Question

我正在使用 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 在这里未定义，但我不知道如何将对象绑定(bind)到 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 绑定(bind)到 this，但由于某种原因，该函数从未被调用。

Answer 1

您需要为 navigationOptions 传递一个函数。请查看示例 here , 考虑以下片段

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>
     )
  }
}

希望这会有所帮助!