Salut,
Vreau să afișez o imagine custom în loc de butonul de back standard. Folosesc librăria react-navigation 5.x.x.
Acesta este AppNavigator:
const Stack = createStackNavigator();
class MyCustomHeaderBackImage extends React.Component {
render() {
return (
<Image
source={require('../../../res/images/back-button.png')}
style={{width: 22, height: 22, tintColor: '#f00'}}
/>
);
}
}
function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Screen1">
<Stack.Screen
name="Screen1"
component={Screen1}
options={{headerShown: false}}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{
headerBackTitleVisible: false,
title: '',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: colors.blue,
shadowColor: 'transparent',
},
headerBackImage: <MyCustomHeaderBackImage/>,
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default AppNavigator;
Ce am încercat până acum:
- Să schimb apelul în
headerBackImage: () => (<MyCustomHeaderBackImage/>)
. Crapă cu mesajulInvariant violation: Element type is invalid: expected a string but got: object
- Să folosesc
<Image />
în loc deMyCustomHeaderBackImage
și să încerc diferite feluri de a face apelul, de ex.headerBackImage: () => (<Image source={require('../../../res/images/email.png')} />)
- Să urmăresc implementarea din https://github.com/react-navigation/react-navigation/blob/2c7187b22aeff1cdec5ca6aeebb40c9c798c0888/examples/NavigationPlayground/js/StackWithCustomHeaderBackImage.js - atât că am foloseit
options
în loc denavigationOptions
, fiind pe react-navigation 5.x.x. - Să folosesc
headerLeft
în loc deheaderBackImage
Din păcate, niciuna dintre variante nu a funcționat. Are cineva idee cum aș putea afișa o imagine custom pentru butonul de back din header?