首页 文章

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

提问于
浏览 次
0

我在react-navigation包中使用react-native 0.50.3 . 我有一些问题要使用手机的后退按钮转到上一个场景 . 它与RN的最新版本有关吗？

这是使用过的代码：

App.js定义抽屉和stacknavigator：

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>;

这就是我如何从一个场景导航到另一个场景：

从我称为“服务”的场景到“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>

我的导航进展顺利，但从场景细节到服务场景，既不能从前一个按钮返回，也不能从手机的后退按钮返回 .

函数 <Button transparent onPress={() => this.props.navigation.goBack()}> 直接发送给"splashscreen"，定义为app.js中的initialroutename . 后退按钮也是如此 .

有什么我做错了吗？

谢谢

react-native react-native-android back-button react-navigation

2 回答

  • 1

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

    • key - string或null - 可选 - 如果设置，导航将从给定键返回 . 如果为null，导航将返回任何位置 . 参考here

    如果嵌套，则必须从当前屏幕提供goBack的密钥 .

    this.props.navigation.goBack(this.props.navigation.state.key)}
    回复于
  • 0

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

    作为附注，我建议使用Native Splashcreen for iOS和Android，而不仅仅是一个组件，然后反转你的路由逻辑，添加一个启动画面，你可以使用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",
    }
);
    回复于

相关问题