Header 后退按钮在独立构建时消失

Question

当我构建一个独立的 android 应用程序时，header 左后退按钮消失了，但如果您单击它，它就会出现。它在模拟器上没有问题。这可能是什么原因造成的？

我不确定它是什么时候开始的，因为我依赖于模拟器，但我知道它在某些时候是有效的

这是我的 app.json

{
  "name": "appname",
  "displayName": "appname",
  "expo": {
    "name": "appname",
    "version": "1.0.0",
    "slug": "appslug",
    "orientation": "portrait",
    "privacy": "unlisted",
    "sdkVersion": "32.0.0",
    "description": "",
    "platforms": [
      "ios",
      "android"
    ],
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "enabled": true,
      "fallbackToCacheTimeout": 30000,
      "checkAutomatically": "ON_LOAD"
    },
    "ios": {
      "buildNumber": "1.0.0",
      "icon": "./assets/images/icon.png",
      "bundleIdentifier": "my.unique.id"
      //      "splash": {
      //        "backgroundColor": "#FFFFFF",
      //        "resizeMode": "cover",
      //        "image": "./assets/iphone/Default-667h@2x.png"
      //      }
    },
    "android": {
      "versionCode": 1,
      "icon": "./assets/images/icon.png",
      "package": "my.unique.id",
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#FFFFFF"
      }
      //      "splash": {
      //        "backgroundColor": "#FFFFFF",
      //        "resizeMode": "cover",
      //        "mdpi": "./assets/android/res/drawable-mdpi/background.9.png",   // natural sized image (baseline),
      //        "hdpi": "./assets/android/res/drawable-hdpi/background.9.png",   // scale 1.5x
      //        "xhdpi": "./assets/android/res/drawable-xhdpi/background.9.png",  // scale 2x
      //        "xxhdpi": "./assets/android/res/drawable-xxhdpi/background.9.png", // scale 3x
      //        "xxxhdpi": "./assets/android/res/drawable-xxxhdpi/background.9.png" // scale 4x
      //      }
    },
    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "my.org",
            "project": "proj",
            "authToken": "************"
          }
        }
      ]
    },
    "primaryColor": "#fefefe"
  }
}

这是我的 App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
import { Ionicons } from '@expo/vector-icons';
import Sentry  from 'sentry-expo';

// Remove this once Sentry is correctly setup.
Sentry.enableInExpoDevelopment = true;

Sentry.config('https://sentry').install();


export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  async componentDidMount() {
    await Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require('./assets/images/robot-dev.png'),
        require('./assets/images/robot-prod.png'),
      ]),
      Font.loadAsync({
        // This is the font that we are using for our tab bar
        ...Icon.Ionicons.font,
        // We include SpaceMono because we use it in HomeScreen.js. Feel free
        // to remove this if you are not using it in your app
        'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      }),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

/navigation/MainTabNavigator.js

import React from 'react';
import {Platform} from 'react-native';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import NotificationScreen from '../screens/NotificationScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ProfileScreen from "../screens/ProfileScreen";
import DraftScreen from "../screens/DraftScreen";
import StatsScreen from "../screens/StatsScreen";
import Colors from "../constants/Colors";
import ViewStoryScreen from "../screens/ViewStoryScreen";
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import MyStoriesScreen from "../screens/MyStories";
import EditStoryScreen from "../screens/EditStoryScreen";
import AddStoryScreen from "../screens/AddStoryScreen";

const headerStyle = {
  /* The header config from HomeScreen is now here */
  /*
   For full list of options
   https://reactnavigation.org/docs/en/stack-navigator.html#navigationoptions-for-screens-inside-of-the-navigator
    */
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: Colors.headerBackgroundColor,
    },
    headerTintColor: Colors.headerTintColor,
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerBackTitleStyle: {color: Colors.headerTintColor},
    headerBackStyle: {color: Colors.headerTintColor},
    headerBackAllowFontScaling: true,

  },
};

const HomeStack = createStackNavigator({
      Home: HomeScreen,
      ViewStoryScreen: ViewStoryScreen,
      EditStory: EditStoryScreen,
      AddStory: AddStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    }
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={
            Platform.OS === 'ios'
                ? `ios-home`
                : 'md-home'
          }
      />
  ),
};

const NotificationStack = createStackNavigator({
      Links: NotificationScreen,
      ViewStoryScreen: ViewStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    });

NotificationStack.navigationOptions = {
  tabBarLabel: 'Notifications',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={Platform.OS === 'ios' ? 'ios-notifications' : 'md-notifications'}
      />
  ),
};

const SettingsStack = createStackNavigator({
      Settings: SettingsScreen,
      Profile: ProfileScreen,
      Drafts: DraftScreen,
      Stats: StatsScreen,
      Login: LoginScreen,
      Register: RegisterScreen,
      MyStories: MyStoriesScreen,
      ViewStoryScreen: ViewStoryScreen,
      EditStory: EditStoryScreen,
      AddStory: AddStoryScreen,
    },
    {
      /* The header config from HomeScreen is now here */
      defaultNavigationOptions: headerStyle.defaultNavigationOptions
    }
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({focused}) => (
      <TabBarIcon
          focused={focused}
          name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
      />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  NotificationStack,
  SettingsStack,
});

解决方案 正如@Masuk Helal Anik 提到的，这是一个 bug 这是对我有用的方法，但不得不牺牲 header 返回标题。在每个屏幕中添加这个

static navigationOptions = ({navigation}) => {
    return {

      headerLeft: (
          <Ionicons
              name={Platform.OS === "ios" ? "ios-arrow-back" : "md-arrow-back"}

              size={Platform.OS === "ios" ? 35 : 24}
              color={Colors.headerTintColor}
              style={
                Platform.OS === "ios"
                    ? { marginBottom: -4, width: 25, marginLeft: 9 }
                    : { marginBottom: -4, width: 25, marginLeft: 20 }
              }
              onPress={() => {
                navigation.goBack();
              }}
          />
      ),
      title: 'Screen Title'
    }
  };

Answer 1

在我看来这像是一个错误。作为此 issue 中的解决方案，

if you use expo you should include the assets from react-navigation in your assetBundlePatterns so the images are bundled with your app when you build a standalone app. the easiest way to do this is to just bundle all assets that your app uses: https://github.com/expo/new-project-template/blob/6d4c5636de573852dfd2f7715cfa152fd9c84f89/app.json#L20-L22. to fix it in development mode within expo, you can cache the assets locally as per this guide. we do this in the navigationplayground example app, so you can copy that code from here.

也有一些解决方法。试试看哪一个适合您！

Header 后退按钮在独立构建时消失

Header back button disappears on stand alone build

react-native

react-native-android

react-native-ios