标签: stack-navigator

我有一个StackNavigation并想要一个默认的Header(组件标题),并希望"深页"显示为React Navigation生成的默认标题.

在我的索引页面中**Index**,只需要Header组件(第一个标题)...但是显示另一个空白标题:

在我的"深度页面"中**Teste**只需要RNav自动生成的标题和后退按钮(第二个标题)......但是第一个标题显示出来.

这是我的导航配置:

const RootNavigator = StackNavigator({
    Welcome: {screen: Welcome},
    User: {
        screen: TabNavigator({
            Clientes: {
                screen: StackNavigator({
                    Index: {screen: Clientes},
                    Teste: {
                        screen: Teste,
                        header: undefined
                    }
                }, {
                    header: null,
                    navigationOptions: {
                        tabBarIcon: () => (
                            <Icon name="list-alt" size={22} color="#ffffff" />
                        )
                    }
                })
            },
            Opcoes: { screen: Opcoes }
        }, {
            tabBarPosition: 'bottom',
            tabBarOptions: {
                showLabel: false,
                activeTintColor: '#fff',
                showIcon: true,
                inactiveTintColor: '#ccc',
                indicatorStyle: {
                    backgroundColor: '#ccc'
                },
                style: …

我正在使用react-navigation我的本机应用程序。我创建了一个底部选项卡导航器，并希望在我的屏幕上使用内置标题。但是标题没有出现。没有错误或警告。

应用程序.js：

const TabStack = createBottomTabNavigator({
  Upload: { 
    screen: upload,
    navigationOption: {
      headerTitle: "Upload"
    }
  },
  Profile: { 
    screen: profile,
    navigationOption: {
      headerTitle: "Profile"
    }
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: { screen: TabStack }
  },
  {
    initialRouteName: 'Home'
  }
);

上传.js

class upload extends React.Component {
    static navigationOptions = {
        title: 'Upload'
    };

    constructor(props) {
        super(props);

    ...

我知道声明 navigationOptions可能不需要在组件中，因为它已经在 app.js 中声明了，但这只是为了表明这两种方法都不起作用。

我该如何解决？

根据标题，我想从子组件中隐藏父堆栈导航器的标题，这是因为在某些屏幕上我想保留父标题，而在某些屏幕上我不想保留父标题。

我知道可以简单地在父 Stack Navigator 中将标头属性设置为 null，但是有什么方法可以在运行时从子组件更改该属性吗？

这是导航器的层次结构：

ParentStackNavigator
|
|__TabNavigator
   |__Other Screen
   |__MainScreen (Stack Navigator)
      |
      |__ScreenWithHeader
      |__ScreenWithoutHeader
         

挑战是当我在 ScreenWithoutHeader 中时隐藏 ParentStackNavigator 中的标头，而不是当我在 ScreenWithHeader 中时隐藏标头。我能想到的一个解决方案是用上下文包装整个事情，但我希望有更好的方法。

我目前是第一次使用 expo 和 expo-router，并对默认后退导航有疑问。我的意思是，例如，在 Google Pixel 上从屏幕左边缘滑动到屏幕中间。这将触发我的堆栈导航器上的后退导航。

在我之前使用 React Navtive CLI 和 React Navigation 的项目中，我可以通过向导航道具的“beforeRemove”事件添加事件侦听器来防止这种情况发生。

如何使用 expo-router 实现这一目标？我按照他们的指示构建了一个CustomStack 导航器，并希望我可以通过这种方式访问​​“导航”。我的代码基本上是这样的：

自定义堆栈.tsx

import { createStackNavigator, StackNavigationOptions } from "@react-navigation/stack";
import { withLayoutContext } from "expo-router";

const { Navigator } = createStackNavigator();

export const CustomStack = withLayoutContext<StackNavigationOptions, typeof Navigator>(Navigator);

_layout.tsx

import { Stack } from "expo-router";
import { CustomStack } from "./CustomStack";

export default function RootLayout() {
return (
    <CustomStack>
        <Stack.Screen name="Home" />
        <Stack.Screen name="About" />
// ...
    </CustomStack>
  );
} …

我正在使用反应导航（堆栈导航）。我想更改我的标题后退按钮图标路线。

1. 家
2. 订票

3. 我的预订

   这些是我在项目中的屏幕。现在，当我单击 MyBookings 屏幕中的标题后退按钮时，它应该路由到主屏幕。

在此页面中，这里提到了属性navigationOptions：

https://facebook.github.io/react-native/docs/navigation.html

我似乎无法找到navigationOptions应该具有的属性的完整列表？我从哪里获得此信息？

我正在为学校做一个项目并使用 react native。诚然，我是 JavaScript 的新手。我不明白为什么在React Navigation 教程中他们使用 const 类型。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

所以我的问题是： const 类型用于 const { navigate } = this.props.navigation;

嗨，我正在尝试创建一个堆栈导航来导航用户的个人资料页面。例如，用户转到 Jake 的个人资料，然后从该个人资料中点击 Ellen 的个人资料链接，然后转到那里，然后再转到 Tom 的个人资料等等......就像 Instagram 个人资料导航一样。

你认为这可以通过反应导航和反应原生来实现吗？

我有这个函数，当一个<TouchableWithoutFeedback>区域被按下时会被执行：

navigateToRentable = () => {
    console.log('in navigateToRentable');

    this.props
     .navigation
     .dispatch(StackActions.reset({
       index: 0,
       actions: [
         NavigationActions.navigate({
           routeName: 'Rent',
           actions: [
              NavigationActions.navigate({
               routeName: 'Rentable',
             }),
           ]
         }),
       ],
     }))
}

我in navigateToRentable在控制台中看到，所以我知道该方法正在触发，但没有其他任何反应 - 控制台中没有其他输出。

这是我的导航结构：

CameraNavigator.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import RentScreenNavigator from './RentScreenNavigator';
import RentScreen from '../pages/RentScreen';
import CameraScreen from '../pages/CameraScreen';
import RentableScreen from '../pages/RentableScreen'; …

我目前正在自学使用 React Native 制作应用程序。我正在使用 React Navigation 在按下按钮时在屏幕之间导航。我可以很好地浏览屏幕。但是，在一个导航中，我还想重置stackNavigator. 我已经查看了重置stackNavigatorusingNavigationActions.reset()方法的解决方案，但我无法让它为 Button 工作。只是为了重新讨论，我一直在尝试使用按钮导航到新屏幕并重置stackNavigator. 这是我的代码：

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationActions, StackActions, createStackNavigator } from 'react-navigation'; // Version can be specified in package.json



class HomeScreen extends React.Component {
     render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                  title="Join Group"
                  onPress={() => this.props.navigation.push('JoinGroup')}
                />
                <Button
                  title="Create Group"
                  onPress={() => this.props.navigation.push('CreateGroup')} …