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，但我不知道如何将对象绑定到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，但由于某种原因，函数永远不会被调用。

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

希望这会有所帮助！

Answer 2

您无法在静态方法中访问组件的props，因为它们没有组件的上下文，因为它尚未初始化。

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

基本上，他们建议将此代码段添加到componentDidMount ...

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

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

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

不幸的是我现在无法运行你的代码，但也许这会有所帮助。

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

2 个答案: