我想在headerRight导航选项上显示两个按钮，但是，react-navigation-header-buttons似乎不允许多个标题按钮组件仅使用一个。我想用一个不起作用的组件来管理某些状态，因为我在导航文件中/钩子不起作用，因为它不是功能性组件。
Docs：
此方法显然不起作用：
headerRight: (
<HeaderButtons HeaderButtonComponent={SoundButton}>
<Item
title="Sound" //key
color="white"
/>
</HeaderButtons>
<HeaderButtons HeaderButtonComponent={ShareButton}>
<Item
title="Share" //key
color="white"
/>
</HeaderButtons>
),
都不是方法：
headerRight: (
<HeaderButtons>
<Item
title="Sound" //key
color="white"
??? component to call - ButtonElement = ?
/>
<Item
title="Share" //key
color="white"
??? component to call - ButtonElement = ?
/>
</HeaderButtons>
)
SoundButton：
//React Deps
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { useDispatch, useSelector } from "react-redux";
//Store
import * as soundActions from "../store/actions/sound-action";
//Misc
import { Ionicons } from "@expo/vector-icons";
const CustomHeaderButton = props => {
const sound = useSelector(state => state.sound.soundState);
const dispatch = useDispatch();
const soundButton = () => {
dispatch(soundActions.toggleSound(sound));
};
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
iconName={sound === "playing" ? "ios-volume-high" : "ios-volume-off"}
onPress={soundButton}
/>
);
};
export default CustomHeaderButton;
ShareButton：
//React Deps
import React from "react";
import { Share } from "react-native";
import { HeaderButton } from "react-navigation-header-buttons";
//Misc
import { Ionicons } from "@expo/vector-icons";
const CustomHeaderButton = props => {
const shareButton = async () => {
try {
const result = await Share.share({
message:
"Message"
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
console.log(error.message);
}
};
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
iconName="md-share"
onPress={shareButton}
/>
);
};
export default CustomHeaderButton;
想知道我有什么选择？谢谢
@ Gaurav Roy提供的糟糕的简单解决方案。只是将我的组件重构为自定义的，而不依赖于HeaderButtons组件。
headerRight: (
<View style={{flexDirection:"row"}}>
<ShareButton />
<SoundButton />
</View>
)
谢谢
您可以实现类似的目标，
标题组件，您可以在标题中添加尽可能多的组件：
export default class ProAppHeader extends Component {
render() {
return (
<View style={{
shadowColor: 'rgba(89, 89, 89,0.2)',
shadowOffset: {
width: 40,
height: 40
},
shadowRadius: 40,
elevation:10
}}>
<Header>
<Left style={{ flex: 1 }}>
<Button transparent onPress={() => this.handleBackClick()}> // here you can use this.props.navigation.goBack()
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>{this.props.title}</Title>
</Body>
<View style={{ flex: 1 }} />
</Header>
</View>
);
}
}
并且在您想要标题的普通类中，只需导入该类并在顶部使用它。
<ProAppHeader title="Profile" navigation={this.props.navigation} />