在 iOS 14 上反应原生导航后退箭头缺失答案

【问题标题】：React native navigation back arrow missing on iOS 14在 iOS 14 上反应原生导航后退箭头缺失
【发布时间】：2021-01-14 21:40:50
【问题描述】：

升级到 iOS 14 时，使用堆栈导航时后退箭头消失。我得出的结论是，它与我们的 react-native 版本有关。我使用https://reactnative.dev/docs/environment-setup 创建了一个新项目，设置如下：

"@react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.7",
"react-native-screens": "^2.10.1",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2"

这样，后退箭头就会显示出来。但是我们的设置如下：

"@react-native-community/masked-view": "^0.1.10",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^3.1.7",
"react-native-screens": "^2.10.1",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2"

通过该设置，后退箭头不显示。我的 App.js 在这两种情况下都是这样的：

import 'react-native-gesture-handler';
import React from 'react';
import {Button, View, Text} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  },
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

一个明显的解决方案是升级 react-native 版本，但我们现在想避免这种情况，因为这是一项相当耗时的任务。您也可以使用 headerBackImage 但我想使用“本机”方式。所以我想问如果有一些资产没有正确链接或其他什么，是否有人知道如何解决这个问题。

【问题讨论】：

标签： ios react-native react-navigation

【解决方案1】：

这可能与 image not showing 问题有关，该问题已在 React Native 版本 0.63.2 中修复。

您可以尝试升级到最新版本或使用the related pull request 中所做的更改修补您的项目。

编辑：遇到了同样的问题，刚刚在我的项目中通过从 RN 0.63.0 升级到 0.63.3 对其进行了测试，现在已修复。

【讨论】：

似乎是这样，我也尝试了this 建议的修复，它也有效。如果您不想升级 React Native，我会将其作为替代答案发布

【解决方案2】：

如果您不想升级 React Native 版本，另一种方法是编辑以下文件：node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m。

替换

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
}

与

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
}

【讨论】：