react-navigation中的navigationOptions和Redux配合应用2018-12-10

问题描述

react-navigation是React-native应用中，最常见的应用导航模块。但是navigationOptions的各种参数，无法通过state来修改。因此我想着，采用redux来直接动态修改属性内容。故记录一下，如何集成redux来修改navigationOptions的参数。我实际的应用其实是，需要在header加一个下拉列表，比较繁琐，我这里就以title为例吧。

上代码TitleView

  import {View} from "react-native";
  import {Text} from "native-base";
  import connect from "react-redux/es/connect/connect";
  import React from 'react';
  export default class TitleView extends React.Component {

/**
 * 构造函数默认初始化用电的信息
 * @param props
 */
constructor(props) {
    super(props);
    this.state = {
    };
}

render() {
    return (
     <View>
         <Text>{this.props.text}</Text>
        </View>

    )
}
}

连接redux

这里在你的应用界面：

const MyTitle = ({ navigation, text }) => <TitleView text={text} navigation=      {navigation} />;
const MyConnectedTitle = connect(storeState => ({       text:storeState.deviceDataSource.dataList.length}))(MyTitle);

以headerLeft为例

 static navigationOptions = ({navigation,screenProps}) => (
            <TouchableOpacity style={{width:120}}>
           
                <View style={styles.TextInputView}>
                    <MyConnectedTitle/>             
                </View>
            </TouchableOpacity>

 })

总结：我搜了网上很多国内的帖子，基本上没有看到类似的好的解决方案。其实思路很简单，仔细看一下就明白了。这里我作为记录，省的将来遇到类似的坑。我的QQ337241905，有相关问题可以联系我。