问题描述
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>
})
