react-navigation@^1.5.11
创建右侧菜单公共组件
当前组件只设置了标题和点击的事件,样式自己调整
/*!
* 标题右侧按钮
*/
import React, {Component} from "react"
import {Text, Button, View} from "react-native"
export default class rightbutton extends Component {
constructor(props) {
super(props);
this.setPress = () => {
if (!!this.props.method) {
this.props.method();
}
}
}
render() {
return (<View >
<Text onPress={this.setPress}>{this.props.title}</Text>
</View>)
}
}
使用
使用的时候,要在每个对应的路由下使用,切记不要在StackNavigatorConfig中的navigationOptions里面的headerRight 属性中使用,因为这里对应的是全局的,这里设置了所有的title右侧都会有(具体视情况而定)
headerRight属性在单个路由下使用
class BidContainer extends Component {
static navigationOptions = ({navigation,screenProps}) =>{
console.log("-------navigation---------screenProps----------");
console.log(navigation);
console.log(screenProps);
return({
// 这里面的属性和App.js的navigationOptions是一样的。
headerStyle:{backgroundColor:screenProps?screenProps.themeColor:'#00ff00'},
title:"叫我首页",
headerRight:<RightButton title="右侧菜单" method={()=>{console.log("点击了我");}}/>,
// header:null
})
}