Question

是否可以在React Navigation的标题标题中访问整个Redux状态？

official docs表示可以访问与导航相对应的状态：

  static navigationOptions = {
    title: ({ state }) => `Chat with ${state.params.user}`
  };

但是我希望访问我的Redux状态的其他部分，当状态更新时标题会更新。今天有可能吗？

Answer 1

这可以通过一些解决方法实现。我甚至不称这是一种解决方法，或者我称之为一个很棒的功能： - ）

您只需在标题中使用新组件，如下所示：

static navigationOptions = {
    header: (navigation) => {
        return <HomeViewTitle />;
    }
}

然后你可以在我的情况下连接HomeViewTitle与redux状态：

import React, { Component } from 'react';

import {
    View,
    Text
} from 'react-native';

import { connect } from 'react-redux';


class HomeViewTitle extends Component {

    render() {

        return (

            <View style={{height: 64, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center', paddingTop: 20}}>
                <Text style={{color: '#FFFFFF', fontSize: 17, fontWeight: 'bold'}}>Home</Text>
            </View>

        );

    }

}

const mapStateToProps = (state) => {
    return state;
}

export default connect(mapStateToProps)(HomeViewTitle);

然后你将你的redux状态作为HomeViewTitle中的道具，你可以设置标题动态

Answer 2

一种更简单的方法来保留标头组件的样式是利用React-Navigation的getParam and setParams。在navigationOptions中，您将拥有：

static navigationOptions = ({ navigation }) => {
   return {
      title: navigation.getParam('title', 'DEFAULT VALUE IF PARAM IS NOT DEFINED'),
   };
}

，然后在componentWillMount()中，您将拥有：

componentWillMount(){
   this.props.navigation.setParams({ 'title': this.props.title })
}

确保将标题分发给道具

const mapStateToProps = state => {
  return {
    title: state.titleSavedInState,
  }
};

如果您在组件状态之前不对状态进行任何更改（注意，在redux中更新状态仅更新组件的prop），则上述内容就足够了。但是，如果要在打开组件时进行更改，则还需要使用：

componentWillUpdate(nextProps, nextState){
    if(this.props.navigation.getParam('title', 'DEFAULT') != this.props.titleSavedInState)
    this.props.navigation.setParams({ 'title': this.props.titleSavedInState })
}

React-Navigation：使用/更改Redux状态的标题标题

2 个答案: