Не удается заставить headerBackImage работать в реагирующей навигации 5.xx - PullRequest
0 голосов
/ 24 марта 2020

Я пытаюсь реализовать пользовательское изображение для кнопки «Назад». Я использую 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

Что другое варианты, которые я пробовал:

  1. Изменение кода на: headerBackImage: () => (<MyCustomHeaderBackImage/>). Это завершается ошибкой с сообщением Invariant violation: Element type is invalid: expected a string but got: object
  2. Использование <Image /> вместо MyCustomHeaderBackImage и попытка вызова различных типов, например headerBackImage: () => (<Image source={require('../../../res/images/email.png')} />)
  3. После точной реализации из https://github.com/react-navigation/react-navigation/blob/2c7187b22aeff1cdec5ca6aeebb40c9c798c0888/examples/NavigationPlayground/js/StackWithCustomHeaderBackImage.js - только то, что я использовал options вместо navigationOptions, так как я использую реагирующую навигацию 5.xx

К сожалению, ни один из перечисленных методов не сработал. Любые идеи о том, как я могу использовать пользовательское изображение для кнопки назад?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...