标签: react-native-navigation

如何删除反应导航顶部栏中选项卡之间的空白。所以应该发生的是选项卡大小应该根据屏幕大小进行调整。

这就是我的导航目​​前的样子。

您可以看到选项卡非常大。它们占用了太多空间。我怎样才能获得这些空白，以便选项卡只占用足够的大小来适合选项卡名称。

我尝试过造型Tab.Navigator但没有成功。例如，我尝试过以下操作：

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: …

我有一个道具，当我更新状态时它会改变。将数据传递到屏幕时如何更新初始参数？

props.authMsg已更新，但初始参数未更新

<Stack.Screen initialParams={{authMsg: props.authMsg}} name="Login" component={Login} />

参数值保持不变。

<Text>{props.route.params.authMsg}</Text>

我有一个bottomTabNavigator，它有两个stacknavigator。每个 stacknavigator 都有自己各自的屏幕。每当我使用类似的东西

navigator.navigate("Stackname" {screen:"screenname", randomProp: "seomthing")

参数被发送到 stacknavigator，而不是屏幕本身。我通过传递解决了这个问题

initialParams=route.params

在堆栈导航器中，但是当我第二次调用第一个代码块时它们不会刷新。有任何想法吗？

我的导航器是：

const MyStack = createStackNavigator();

const MyRoutes= () => (
  <MyStack.Navigator headerMode='none' initialRouteName='First'>
    <MyStack.Screen name='First' component={ScreenFirst} />
    <MyStack.Screen name='Second' component={ScreenSecond} />
  </MyStack.Navigator>
);

我的实际流程是：

const MyStack = createStackNavigator();

const MyRoutes= () => (
  <MyStack.Navigator headerMode='none' initialRouteName='First'>
    <MyStack.Screen name='First' component={ScreenFirst} />
    <MyStack.Screen name='Second' component={ScreenSecond} />
  </MyStack.Navigator>
);

但我想显示First路线而不将其添加到后台堆栈，所以它是：

First -> (next) -> Second -> (back) -> First

是否可以？如果是，怎么办？我在用"@react-navigation/native": "^5.6.1"。

我知道我可以控制路由中的 Back 行为Second，但由于在 Android (Java/Kotlin) 中可以显示 Fragment 而无需将其添加到 backstack，我想 React Native 中也存在类似的东西。

我正在使用React-Navigation并StackNavigator在我的反应本机应用程序的顶部实现一个导航栏，它显示应用程序徽标居中和右侧的菜单按钮。不过，我无法让它占据标头容器的完整空间，左侧始终有约 20px 的边距。

正如您在我的代码中看到的，我已经应用了各种样式属性，例如margin: 0、padding: 0和to以及导航栏组件本身，但它们都没有帮助。alignment: fillwidth:100%headerStyleheaderContainerStyle

应用程序.js：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import {Home} from "components/Home";
import {NavigationBar} from "components/NavigationBar";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer headerStyle={styles.container}>
      <Stack.Navigator
        initialRouteName="Home" headerStyle={styles.container}
        screenOptions={{
                        headerTitleContainerStyle: styles.container,
                        headerTitleStyle: styles.title,
                        headerStyle: styles.header,
                        headerTitle: props => <NavigationBar {...props} /> …

沙盒应用程序包含两个带有 React Native Stack 导航器的屏幕。

当使用按钮显式调用“navigation.navigate("Desired Screen")”时，应用程序表现良好。但是，当尝试使用后退按钮（离开初始路线屏幕时在标题上自动创建）时，屏幕加载大约需要 2 秒。

在打开“调试”和未打开“调试”的真实 Android 设备上进行了测试。这是反应本机导航的预期行为吗？

应用程序.tsx：

import React from 'react';
import {Text, View} from 'react-native';
import {Home} from './src/screens/fornav/Home';
import {MySettings} from './src/screens/fornav/MySettings';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  MySettings: undefined;
};
const MyStack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <MyStack.Navigator initialRouteName="Home">
        <MyStack.Screen
          name="Home"
          component={Home}
          options={{title: 'My Home Screen'}}
        />

        <MyStack.Screen name="MySettings" component={MySettings} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
};

export default …

在 React 中，每次更改时我都可以location使用use-react-router执行代码，这使我可以访问history、location和match属性。我所做的是使用 auseEffect并在每次location属性更改时运行代码，如下所示：

import useRouter from "use-react-router";

const { location } = useRouter();

React.useEffect(() => {
  // run some code every time `location` change.
}, [location]);

有没有办法通过react-native中的react-navigation来实现相同的行为？

更新 1 - 使用 useNavigationState 挂钩的临时解决方案

我试图检查导航状态是否发生变化并在发生变化时运行代码，为了实现这一点，我使用了useNavigationStatereact-navigation：

import {useNavigationState} from '@react-navigation/native';

const navigationState = useNavigationState(state => state);

React.useEffect(() => {
  // run some code every time `location` change.
}, [navigationState]);

这种方法有一个问题，如果您尝试在外部使用此方法 …