React Navigation：后退按钮不会转到上一个场景，而是转到 initialRouteName

Question

我在 react-navigation 包中使用 react-native 0.50.3。我有一些问题要使用 phone 的后退按钮转到上一个场景。跟上个版本的RN有关系吗？

这是使用的代码：

App.js 定义抽屉和堆栈导航器：

import React from "react";
import {TabView, TabBarBottom} from 'react-navigation';
import { Platform } from "react-native";

import { Root } from "native-base";
import { StackNavigator, TabNavigator, DrawerNavigator  } from "react-navigation";


import SideBar from "./main_scenes/sidebar/";
import HomeServices from "./main_scenes/services/";
import Profile from "./main_scenes/profile/";


import Splashscreen from "./main_scenes/home/splash";
import Services from "./main_scenes/services/servicesdetails/";

const Drawer = DrawerNavigator(
  {

    Splashscreen:{screen:Splashscreen},
    Services:{screen:Services},

  },
  {
    initialRouteName: "Splashscreen",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

const Feedstack = StackNavigator(
    {
        Drawer: { screen: Drawer },
        HomeServices:{screen:HomeServices},
        Profile:{screen:Profile},
    },
    {
        initialRouteName: "Drawer",
        headerMode: "none",
    }
);

export default () =>
  <Root>
    <Feedstack />
  </Root>;

这就是我从一个场景导航到另一个场景的方式：

从我的场景 "services" 到 "servicesdetails"。首先，我为路线中的所有数据创建了一个数组作为变量

    const datas = [
      {
        img: img1,
        text: "Some text,
        note: "Its time to build a difference . .",
        route: "Services",
      },
 {
    img: img2,
    text: "Some text",
    note: "Its time to build a difference . .",
    route : "Another_one_for_test"
  },
    ]

然后在 render() 中，我使用：

 <Content>
          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem button thumbnail onPress={() => this.props.navigation.navigate(data.route)}>
                <Left>
                  <Thumbnail square size={80} source={data.img} />
                </Left>
                <Body>
                  <Text >{data.text}</Text>
                  <Text numberOfLines={1} note>{data.note}</Text>
                </Body>

              </ListItem>}
          />
        </Content>

我的导航很好，但是从场景细节到服务场景，既不能从上一个按钮返回，也不能从phone的后退按钮返回。

函数<Button transparent onPress={() => this.props.navigation.goBack()}>直接将我发送到"splashscreen"定义为app.js中的初始路由名称。后退按钮也一样。

我做错了什么吗？

谢谢

Answer 1

返回上一屏幕并关闭当前屏幕。 back action creator 接受一个可选参数：

key - 字符串或 null - 可选 - 如果设置，导航将从给定的键返回。如果为空，导航将返回任何地方。参考 here

如果嵌套，您必须提供从当前屏幕返回的键。

this.props.navigation.goBack(this.props.navigation.state.key)}

Answer 2

您应该将导航道具传递给不同的导航器：使用 navigation={this.props.navigation}，更多详细信息请参见：https://reactnavigation.org/docs/intro/nesting#Nesting-a-Navigator-in-a-Component

作为旁注，我建议对 iOS 和 Android 使用 Native Splashcreen，而不仅仅是一个组件，然后反转你的路由逻辑，要添加启动画面，您可以使用 rn-toolbox：https://github.com/bamlab/generator-rn-toolbox/tree/master/generators/assets

const Drawer = DrawerNavigator(
  {
    Splashscreen:{screen:Splashscreen},
    Services:{screen:Services},
    Feedstack:{screen:Feedstack}
  },
  {
    initialRouteName: "Feedstack",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

const Feedstack = StackNavigator(
    {
        HomeServices:{screen:HomeServices},
        Profile:{screen:Profile},
    },
    {
        initialRouteName: "HomeServices",
        headerMode: "none",
    }
);

React Navigation：后退按钮不会转到上一个场景，而是转到 initialRouteName

React Navigation : Back button doesn't go to previous scene but to initialRouteName

back-button

react-native

react-native-android

react-navigation