标签: react-navigation-v6

在我的 React Native (Expo) 应用程序中，我想将React Navigation从 V5 升级到 V6。但是，我无法TextInput在堆栈导航器标题中设置全角。我尝试了'auto'样式'100%'的价值width，但是都没有帮助真正的宽文本框。

以下是世博小吃的复制链接：https://snack.expo.io/@vahdet/reactnavigation6-headerbar，App.js其内容如下。我想我缺乏一些弹性盒知识headerSearchBarStyle：

import React, { useLayoutEffect, useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { enableScreens } from 'react-native-screens';
import { AppearanceProvider } from 'react-native-appearance';
import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '@react-navigation/stack';

enableScreens();
const HomeStack = …

当我从注册屏幕导航到主屏幕时，出现以下错误。我在 React Native 中使用了嵌套导航。这是我的 app.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import  {createDrawerNavigator}  from '@react-navigation/drawer';
import Profile from './src/components/Profile';
import SignUp from './src/components/SignUp';
import LoginScreen from './src/screens/LoginScreen'
import ViewAllBooks from './src/screens/ViewAllBooks'
import Home from './src/screens/Home'




const Stack = createStackNavigator();
//  for drawer navigation
const Drawer = createDrawerNavigator();
function Root() {
  return (

      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        
      </Drawer.Navigator>

  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="signUp"> …

我正在尝试使用抽屉导航将标题居中。它在 ios 上的默认行为是居中，但对于 Android 来说，它会移动到抽屉旁边的左侧。如何使其位于导航栏的中心。我尝试了文档中提供的不同选项，但没有任何帮助。这在 ios 和 android 上几乎都是中心外观，但它并不是万无一失的。

const DrawerNavigator = () => {
  const screenOptionsProps = {
      screenOptions: {
      headerTitle: () => {
        return (
          <View
            style={{
                height: dimensions.height * 0.1,
                width: dimensions.width - dimensions.width * 0.36,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
            <Text>Title</Text>
          </View>
        );
      },
    },
  }
  };
  return (
    <Drawer.Navigator
      {...screenOptionsProps}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={Screen1} />
    </Drawer.Navigator>
  );
};

使用 React Navigation 6，在文档中，他们建议您使用组来最小化嵌套导航器。

但是，我不确定如何在本示例中执行此操作，在选项卡导航器中使用嵌套堆栈：

import * as React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function FeedScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function ProfileScreen() {
  return <View />;
}

function SettingsScreen() {
  return <View />;
}

const …

如何在 React Navigation 的嵌套导航器中实现深度链接。这里我有一个嵌套的堆栈导航器：

function AuthStack() {
  return (
    <Stack.Navigator>
        <Stack.Screen component={Login} name="Login" />  // deep link this screen
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
    </Stack.Navigator>
  );
}

它嵌套在另一个主堆栈导航器中：

const linking = {
  prefixes: ["wagal://"],
  config: {
    screens: {
      AuthStack: "login",  // this doesn't reference `Login` screen on deep linking
    },
  },
};

function homeStack() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen component={AuthStack} name="AuthStack" />  // here
        // ...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我尝试深层链接“wagal://login/”来进行Login筛选：

screens: {
  AuthStack: "login",
},

但没有成功，我也尝试过： …

我是 React Native 的新手，我正在尝试执行简单的堆栈导航。我让它在应用程序的另一部分工作（用户身份验证步骤）。一旦用户登录，我的代码就会输入另一个堆栈。这个堆栈导航器嵌套了一个选项卡导航器，这可能会导致问题？

无论哪种方式，我都无法执行从我的个人资料屏幕到编辑个人资料屏幕的推送。代码如下。

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import SignupScreen from './screens/SignupScreen';
import ProfileScreen from './screens/ProfileScreen';
import EditProfileScreen from './screens/EditProfileScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

const Stack = createNativeStackNavigator()

const screenOptions = {

headerShown: false

}

export const SignedOutStack = () =\> (

\<NavigationContainer\>

\<Stack.Navigator

initialRouteName="LoginScreen"

screenOptions={screenOptions}

\\>

\<Stack.Screen

name="Login"

component={LoginScreen}

/\>

\<Stack.Screen

name='SignupScreen' …