問題描述
react-navigation是React-native應(yīng)用中赃春，最常見的應(yīng)用導(dǎo)航模塊。但是navigationOptions的各種參數(shù)，無法通過state來修改鼎姊。因此我想著，采用redux來直接動態(tài)修改屬性內(nèi)容相赁。故記錄一下相寇，如何集成redux來修改navigationOptions的參數(shù)。我實際的應(yīng)用其實是钮科，需要在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 {
/**
* 構(gòu)造函數(shù)默認(rèn)初始化用電的信息
* @param props
*/
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<View>
<Text>{this.props.text}</Text>
</View>
)
}
}
連接redux
這里在你的應(yīng)用界面：
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>
})
