Я пытаюсь реализовать пользовательское изображение для кнопки «Назад». Я использую response-navigation 5.xx Это мой 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;
С этим кодом, когда я получаю доступ к Screen2
, происходит сбой с сообщением backImage is not a function
Что другое варианты, которые я пробовал:
- Изменение кода на:
headerBackImage: () => (<MyCustomHeaderBackImage/>)
. Это завершается ошибкой с сообщением Invariant violation: Element type is invalid: expected a string but got: object
- Использование
<Image />
вместо MyCustomHeaderBackImage
и попытка вызова различных типов, например headerBackImage: () => (<Image source={require('../../../res/images/email.png')} />)
- После точной реализации из https://github.com/react-navigation/react-navigation/blob/2c7187b22aeff1cdec5ca6aeebb40c9c798c0888/examples/NavigationPlayground/js/StackWithCustomHeaderBackImage.js - только то, что я использовал
options
вместо navigationOptions
, так как я использую реагирующую навигацию 5.xx
К сожалению, ни один из перечисленных методов не сработал. Любые идеи о том, как я могу использовать пользовательское изображение для кнопки назад?