关于React Navigation v5中的自定义标题的问题（不可单击的后退按钮）

Question

[嗨，我正在使用React导航v5。我正在尝试为特定屏幕实现自定义标题。所以我的自定义标题看起来像这样

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 =>）时，它会显示自定义后退按钮。

我想念什么？

Answer 1

您正在破坏props两次。尝试：

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

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

  ...

}