Question

我一直在expo上开发一个react native应用，导航在开始时就起作用了，片刻之后当按下android按钮时该应用开始退出。

我使用了expo starter导航示例，我删除了createSwitchNaviagtor并替换为createStackNavigator，该应用程序显示标题后退箭头，但是当按下后退按钮时，该应用程序仍然退出。 >

这些是代码段。

Package.json

{
  "name": "my-new-project",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node ./node_modules/jest/bin/jest.js --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "@expo/vector-icons": "^6.3.1",
    "expo": "29.0.0",
    "firebase": "^5.4.2",
    "native-base": "^2.8.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
    "react-navigation": "^2.16.0"
  },
  "devDependencies": {
    "jest-expo": "29.0.0"
  }
}

AppNavigator

import React from 'react';
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Main tab
import MainTabNavigator from './MainTabNavigator';
// Screens
import SuppliersScreen from '../screens/suppliers/SuppliersScreen'
import SupplierScreen from '../screens/supplier/SupplierScreen'
import ItemScreen from '../screens/item/ItemScreen'
import BasketScreen from '../screens/basket/BasketScreen'
import OrderScreen from '../screens/order/OrderScreen'
import EditProfileScreen from '../screens/editProfile/EditProfileScreen'
import AboutScreen from '../screens/about/AboutScreen'
import LoginScreen from '../screens/login/LoginScreen';
import SignupScreen from '../screens/signup/SignupScreen';
import PasswordResetScreen from '../screens/passwordReset/PassWordReset';
import CategoriesScreen from '../screens/categories/CategoriesScreen';

const SuppliersStack = createStackNavigator({
  Suppliers: SuppliersScreen,
});
const SupplierStack = createStackNavigator({
  Supplier: SupplierScreen,
});

const ItemStack = createStackNavigator({
  Item: ItemScreen,
});

const BasketStack = createStackNavigator({
  Basket: BasketScreen,
});

const OrderStack = createStackNavigator({
  Order: OrderScreen,
});

const LoginStack = createStackNavigator({
  Login: LoginScreen,
});

const SignupStack = createStackNavigator({
  Signup: SignupScreen,
});

const PasswordResetStack = createStackNavigator({
  PasswordReset: PasswordResetScreen,
});

const EditProfileStack = createStackNavigator({
  EditProfile: EditProfileScreen,
});

const AboutStack = createStackNavigator({
  About: AboutScreen,
});

export default createStackNavigator({
  Main: MainTabNavigator,
  Suppliers: SuppliersStack,
  Supplier: SupplierStack,
  Item: ItemStack,
  Basket: BasketStack,
  Order: OrderStack,
  EditProfile: EditProfileStack,
  About: AboutStack,
  Login: LoginStack,
  Signup: SignupStack,
  PasswordReset: PasswordResetStack
}, {
    initialRouteName: 'Main'
  });

MainTabNavigator

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/home/HomeScreen/';
import ProfileScreen from '../screens/profile/ProfileScreen';
import OrdersScreen from '../screens/orders/OrdersScreen'

// Home screen
const HomeStack = createStackNavigator({
  Home: HomeScreen,
});
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};
// Orders Screen
const OrdersStack = createStackNavigator({
  Orders: OrdersScreen,
});
OrdersStack.navigationOptions = {
  tabBarLabel: 'Orders',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-reorder${focused ? '' : '-outline'}` : 'md-reorder'}
    />
  ),
};

const ProfileStack = createStackNavigator({
  Profile: ProfileScreen,
});
ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-cog` : 'md-cog'}
    />
  ),
};
// Main Bottom Tab Navigation
export default createBottomTabNavigator({
  HomeStack,
  OrdersStack,
  ProfileStack,
});

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View, NetInfo, YellowBox } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
import { Root } from "native-base";
import _ from 'lodash';
// //import firebase

YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
  if (message.indexOf('Setting a timer') <= -1) {
    _console.warn(message);
  }
};

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoadingComplete: false,
    };

  }


  async componentWillMount() {
    await Expo.Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });


  }
  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" />}
          <Root>
            <AppNavigator />
          </Root>
        </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 });
  };
}

谢谢

已更新

export default createStackNavigator({
  Main: {
    screen: MainTabNavigator
  },
  Suppliers: {
    screen: SuppliersScreen
  },
  Supplier: {
    screen: SupplierScreen
  },
  Item: {
    screen: ItemScreen
  },
  Basket: {
    screen: BasketScreen
  },
  Order: {
    screen: OrderScreen
  },
  EditProfile: {
    screen: EditProfileScreen
  },
  About: {
    screen: AboutScreen
  },
  Login: {
    screen: LoginScreen
  },
  Signup: {
    screen: SignupScreen
  },
  PasswordReset: {
    screen: PasswordResetScreen
  },
}, {
    initialRouteName: 'Main'
  });

那也是我尝试过的另一种方式

Answer 1

我找到了这个问题的根源，我在Related issue中找到了解决方案。此解决方案有效This answer

世博反应导航android后退按钮

1 个答案: