Вопрос по поводу пользовательского заголовка в React Navigation v5 (кнопка «назад не нажимается») - PullRequest
Новая
       5

Вопрос по поводу пользовательского заголовка в React Navigation v5 (кнопка «назад не нажимается»)

0 голосов
/ 11 марта 2020

Привет, я использую React navigation v5. Я пытаюсь реализовать пользовательский заголовок для конкретного экрана c. Таким образом, мой пользовательский заголовок выглядит следующим образом:

CustomHeader. js

export function CustomHeader({props}) {
  const {scene, previous, navigation} = props;
  const opacity = scene.route.params.opacity;

  return (
    <React.Fragment>
      <Animated.View style={[styles.headerStyle, {opacity}]}>
        <View style={styles.influencerNameContainer}>
          <Text style={styles.influencerName}>
            {scene.route.params.influencer.user.name}
          </Text>
        </View>
      </Animated.View>

      {previous ? (
/* This is a back button */
        <Button
          style={[styles.iconButton, {left: 0}]}
          icon={BackIcon}
          onPress={() => {navigation.goBack}
        />
      ) : (
        undefined
      )}
    </React.Fragment>
  );
}

Навигатор выглядит следующим образом 

export function HomeStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
      style={{backgroundColor: 'yellow'}}>

      <Stack.Screen
        name="InfluencerScreen"
        component={InfluencerScreen}
        options={{
          header: props => <CustomHeader props={props} />,
        }}
      />
    </Stack.Navigator>
  );
}

Он отображает пользовательские заголовки и пользовательскую кнопку возврата, но назад кнопка не активна Итак, я попытался. 

<Stack.Screen
        name="InfluencerScreen"
        component={InfluencerScreen}
        options={{
          header: props => <CustomHeader props={props} />,
          headerLeft: () => (
            <Button title="Back Button" onPress={() => alert('Pressed')} />
          )
        }}
      />

С этим кодом он вообще не показывает кнопку возврата с пользовательским заголовком. Но она показывает пользовательскую кнопку возврата, когда я удаляю пользовательский заголовок (header: props =>).

Что мне не хватает?

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Вы показываете собственный заголовок, как вы отрисовываете кнопку, зависит от вас. React Navigation не может отобразить кнопку возврата, поскольку React Navigation больше не отображает заголовок.

Вместо использования опции headerLeft необходимо поместить кнопку возврата внутри настраиваемого заголовка.

Также ваша деструктура неверна. function CustomHeader({props}) должно быть function CustomHeader(props) (без фигурных скобок).

0 голосов
/ 11 марта 2020

Вы разрушаете props дважды .. Попробуйте: 

export function CustomHeader({scene, previous, navigation}) {

  // const {scene, previous, navigation} = props; // remove this

  ...

}

Редактировать:

Также goBack это метод, так Назовите его с круглыми скобками : 

onPress={() => navigation.goBack()} // remove unnecessary `curly braces`
...