Nu reușesc să afișez o imagine custom pentru butonul de back din header - React Native

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:

  1. Să schimb apelul în headerBackImage: () => (<MyCustomHeaderBackImage/>) . Crapă cu mesajul Invariant violation: Element type is invalid: expected a string but got: object
  2. Să folosesc <Image /> în loc de MyCustomHeaderBackImage și să încerc diferite feluri de a face apelul, de ex. headerBackImage: () => (<Image source={require('../../../res/images/email.png')} />)
  3. 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 de navigationOptions , fiind pe react-navigation 5.x.x.
  4. Să folosesc headerLeft în loc de headerBackImage

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?

Vezi poate trebuie să selectezi o opțiune din browser să permită overwrite la setările default.

Problema este pentru o aplicație mobilă scrisă în React Native. :slight_smile:

1 Like

Am reușit să afișez imaginea custom, puteți găsi soluția la https://snack.expo.io/@narcis/custom-back-button .