我正在尝试向使用Hooks的React功能组件注入自定义标头。
例如,我有以下带有一些钩子的React功能组件:
function StoryHome(props) {
const [communityObj, setCommunityObj] = useState({
uid: null,
name: null,
});
...
}
StoryHome.navigationOptions = {
title: 'Stories',
headerTitleStyle: {
textAlign: 'left',
fontFamily: 'OpenSans-Regular',
fontSize: 24,
},
headerTintColor: 'rgba(255,255,255,0.8)',
headerBackground: (
<LinearGradient
colors={['#4cbdd7', '#3378C3']}
start={{ x: 0, y: 1 }}
end={{ x: 1, y: 1 }}
style={{ flex: 1 }}
/>
),
headerRightContainerStyle: {
paddingRight: 10,
},
headerRight: (
<TouchableOpacity onPress={navigation.navigate('storiesList')}>
<Ionicons
name="ios-search-outline"
size={25}
color="white"
left={20}
/>
</TouchableOpacity>
)
};
export default StoryHome;
因此,除了TouchableOpacity
部分以外,这类工作都是如此。
首先,我无法正确渲染Ionicon
,其次,我无法访问功能组件外部的navigation
对象。
我很想继续使用Hooks,但似乎无法弄清楚这一点。
答案 0 :(得分:3)
navigationOptions
可以是一个函数,它以navigation
作为属性来获取对象作为参数。
您还需要确保为onPress
提供了一个函数,并且您没有直接调用navigation.navigate
。
StoryHome.navigationOptions = ({ navigation }) => ({
title: "Stories",
headerTitleStyle: {
textAlign: "left",
fontFamily: "OpenSans-Regular",
fontSize: 24
},
headerTintColor: "rgba(255,255,255,0.8)",
headerBackground: (
<LinearGradient
colors={["#4cbdd7", "#3378C3"]}
start={{ x: 0, y: 1 }}
end={{ x: 1, y: 1 }}
style={{ flex: 1 }}
/>
),
headerRightContainerStyle: {
paddingRight: 10
},
headerRight: (
<TouchableOpacity onPress={() => navigation.navigate("storiesList")}>
<Ionicons name="ios-search" size={25} color="white" left={20} />
</TouchableOpacity>
)
});