标签: stack-navigator

我将React Navigation用作应用程序的导航器组件。我想更改堆栈导航器的字体系列。目前，我这样做是为了更改iOS中的字体系列，并且效果很好：

const LoggedInStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'payX',
      headerTitleStyle: {
        fontFamily: "my-custom-font"
      }
    }
  }
});

但不适用于Android设备。如何更改代码以使其在Android中也能正常工作？

在React Navigation 3.0中，他们添加了将默认参数传递到屏幕的功能。问题是我想将这些参数传递给嵌套的stackNavigator，但我不知道该怎么做。这些是我的导航器：MainDrawer.js：

    const MyDrawerNavigator = createDrawerNavigator({
      Anime: {
        screen: SerieNavigation,
        params: { type: "anime" },
        path: "anime/:anime"
      },
      Tv: {
        screen: SerieNavigation,
        params: { type: "tv-show" },
        path: "tv/:tv"
      },
      Film: {
        screen: SerieNavigation,
        params: { type: "film" },
        path: "film/:film"
      }
    });

    const AppContainer = createAppContainer(MyDrawerNavigator);

    export default AppContainer;

SerieNavigation.js：

    const SerieStack = createStackNavigator(
      {
        Content: {
          screen: SearchScreen,
          params: { type: "anime" } //<-- HERE I WOULD LIKE TO DO SO params: { type: props.navigation.state.params.type }
        }, …

在我的应用程序中，我有 3 个堆栈，例如 StackOne

export const StackOne = createStackNavigator({
  OneScreen: { screen:one  },
  TwoScreen: { screen:two  },
  ThreeScreen: { screen:three  },
}, { initialRouteName: 'OneScreen', }
);

堆栈二

export const StackTwo = createStackNavigator({
  OneScreenTwo: { screen:oneTwo  },
  TwoScreenTwo: { screen:twoTwo  },
  ThreeScreenTwo: { screen:threeTwo  },
}, { initialRouteName: 'OneScreenTwo', }
);

我像这样使用抽屉导航。 主抽屉

const MainDrawer = createDrawerNavigator(
  {
    One: { screen: StackOne },
    Two: { screen: StackTwo },
    Other: { screen: OtherScreen},
  },
  {}
);

一切正常。管理抽屉 - 堆叠得很好，唯一的问题是当我在StackOne's ScreenTwo …

My app has 5 components (screens), I am using stack navigation version 5, I need the headers for all screens except one screen, I tried to do this via option inside screens like this:

This is my code:

const Stack = createStackNavigator();
const MainStack = () => ({
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="MyTabs" component={MyTabs} />
                <Stack.Screen name="Direct" component={Direct} />
                <Stack.Screen name="Like" component={Like} />
                <Stack.Screen name="Search" component={Search} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </NavigationContainer>
    )
)}

我正在使用@react-navigation/stack版本^5.5.1. 我试图在堆栈导航的不同屏幕上显示不同的标题。例如，在 上Master，我不需要标题，即headerMode="none"；在 上Home，我想要一个自定义标头，在 上，Details我想要一个不同的自定义标头。我该如何实现这一目标？这是我当前的代码：

const AppStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Master" component={ Master } />
        <Stack.Screen name="Home" component={ Home } />
        <Stack.Screen name="Details" component={ Details } />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

对于编程来说并不陌生，但对于应用程序开发和反应式本机来说却是新手。我已经搜索了近四个小时来解决这个问题。我意识到有很多这样的问题，但这不是重复的，因为任何工作代码都不适用于我的。

我按照本教程进行操作，但 VS code 给了我错误。即，与 .tsx 屏幕文件中的文本和按钮导入相关。以下代码不断给我一个错误：

const HomeScreen = ({ navigation }) => {
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigation.navigate('Profile', { name: 'Jane' })
        }
     />
   );
};

错误：绑定元素“navigation”隐式具有“any”类型。ts(7031)

据我所知，这与语言输入有关，因为类型尚未声明，所以我无法使用代码。问题是，我已经按照教程进行操作，搜索了许多不同的网站和一些不同的教程，但我无法使其正常工作。

我已经在第一行尝试了所有这些变体：

const HomeScreen = ({ navigation.navigate ) => {
const HomeScreen = ({ navigation } : Navigator) => {
const HomeScreen = ({ navigation NavigationContainer}) => {
const HomeScreen = ({ navigation = NavigationAction}) => {
const HomeScreen = ({ }) => { …

在我的应用程序中，我有Login Screen、ForgotPassword Screen和SignUp Screen。在注册屏幕中，我使用react-native-swiper来显示注册过程的三个步骤的幻灯片。我在StackNavigator 中包装了这些屏幕，并将这个StackNavigator作为根组件呈现在我的App.js 中。

这是我的StackNavigator：

路由器.js

import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';

const AuthStackNavigator = createStackNavigator({
    Login: {
        screen: Login
    },
    ForgotPassword: {
        screen: ForgotPassword
    },
    SignUp: {
        screen: SignUp
    },
});

const Router = createAppContainer(AuthStackNavigator)

export default Router

应用程序.js

import React, { Component } from …

我目前正在开发一个用react-native 编写的移动应用程序。该项目有许多不同的屏幕，所有这些屏幕都使用 createStackNavigator 进行配置。

我需要能够动态更改动画方向。我可以在应用程序的不同部分导航到同一页面，但需要不同的动画。（动画是指当前屏幕退出视图的方向）

我知道在定义选项以设置导航方向时可以将选项传递到屏幕。不幸的是，这对我来说没有用，因为动画可能会因页面而异。

我的项目中的示例屏幕声明（名称已被清理）：

<NavigationContainer ref={navigationRef}>
  <Stack.Navigator initialRouteName={initialRoute}>
     <Stack.Screen name="screen1" component={screen1} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen2" component={screen2} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen3" component={screen3} options={{headerShown: false, gestureEnabled: false}} />
     <Stack.Screen name="screen4" component={screen4} options={{headerShown: false, gestureEnabled: false}} />
  </Stack.Navigator>
</NavigationContainer>

导航重置示例：

  navigation.reset({
    index: 0,
    routes: [{ name: "screen1", params: { param1: 'paramStrData' } }]
  });

导航替换示例：

navigation.replace('screen2', { param1: 'param1StrData'})

理想情况下，我希望能够将导航动画方向传递给替换或重置功能。

这是可能吗？

再次提前致谢。

expo-router我在包含 2 个屏幕的 React Native Expo 应用程序中使用，app/home.js并且app/details.js. 有一个导航到屏幕的Link按钮。home.jsdetails.js

现在，两个屏幕的标题都位于屏幕顶部。有没有办法仅禁用屏幕的标题home.js？从主屏幕导航到详细信息屏幕后，详细信息屏幕上的标题仍应显示后退箭头，以便用户导航回主屏幕。

app/_layout.js

import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {

  return (
    <SafeAreaProvider>
      <Stack
        initialRouteName="home"
      />
    </SafeAreaProvider>
  );
}

所以基本上我正在学习本地反应。我使用的是react导航包，我只想在我的堆栈导航器上显示一个简单的标题，但标题已切断。堆栈导航标题

这是我的 App.js

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer} from 'react-navigation'
import HomeScreen from './screens/HomeScreen'
import DetailsScreen from './screens/DetailsScreen'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(RootStack)

export default class App extends React.Component {
  render(){
    return<AppContainer />
  }
}

这是我的HomeScreen.js

import React from 'react'
import {Button, View, Text } from 'react-native'

export default class HomeScreen extends React.Component {

  static …