React Native修改headerLeft后this.props.navigation.goBack()失效无法返回如何解决

• 你的App是包裹NavigationContainer的根组件，本身没有被纳入导航栈路由管理，因此this.props.navigation本身就是undefined，调用它的方法自然报错。
• 你给TouchableOpacity的onPress属性直接写了this.props.navigation.goBack()，相当于组件渲染时就会立即执行该方法，而非点击时触发，写法本身不符合事件回调的要求。

Stack.Screen的options属性支持传入函数，会自动注入当前路由的navigation、route对象，你可以直接从这个参数里拿到可用的导航实例，同时修正onPress的回调写法即可：

const Stack = createStackNavigator();

class App extends Component {
  render() {
    return (
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName={'VideoList'}
            screenOptions={{
              headerBackTitleVisible: false,
            }}>
            <Stack.Screen
              name="Video Details"
              component={VideoDetails}
              // options改为函数形式，接收注入的navigation参数
              options={({navigation}) => ({
                headerBackTitleVisible: false,
                headerLeft: ({focused}) => (
                  {/* 改为箭头函数，点击时才触发goBack */}
                  <TouchableOpacity onPress={() => navigation.goBack()}>
                    <Image
                      source={icons.back}
                      resizeMode="contain"
                      style={{
                        width: 15,
                        height: 15,
                        marginLeft: 20,
                        tintColor: focused ? COLORS.primary : COLORS.secondary,
                      }}
                    />
                  </TouchableOpacity>
                ),
              })}
            />
          </Stack.Navigator>
        </NavigationContainer>
    );
  }
}

如果需要避免当前页面是导航栈首页时调用goBack报错，可以加一层判断：

onPress={() => navigation.canGoBack() && navigation.goBack()}

内容的提问来源于stack exchange，提问作者user16869183