标签: react-navigation-v5

我正在使用 React Navigation v5，@react-navigation/bottom-tabs我的标签看起来像这样。

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Modal" component={ModalScreen} />
    <Tab.Screen name="Settings" component{SettingsScreen} />
  </Tab.Navigator>

我想在“主页和设置”选项卡上打开屏幕，但在“模式”选项卡上，我想打开一个模式，为此，使用 React Navigation v4，可以使用tabBarOnPress它来运行回调，但在 React Navigation v5 中不可用，tabBarOnPressReact Navigation v5有什么替代方案吗？

任何帮助，将不胜感激！

我似乎无法在新版本的 React Navigation 中将标头配置为 null。我可以使用 headerTransparent 选项将其设置为透明，但这看起来标题仍然存在，因为屏幕仍然需要一个名称。

这是我最初拥有的，使用新的 Expo 应用程序附带的模板

这就是标题为 transparent 的样子。这基本上是我想看到的，但标题仍然被强加在那里。

我不想要带有导航的标题，但这看起来像是默认行为。我尝试查看文档以查看是否有删除标题的道具，但遇到了 404 选项页面：https : //reactnavigation.org/docs/en/navigation-options.html

我是 React Native 的新手，所以可能有一些误解。但是文档对此不清楚，我找不到直接解决此问题的计算器溢出问题。

这是我的 App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BottomTabNavigator from './navigation/BottomTabNavigator';
import useLinking from './navigation/useLinking';

const Stack = createStackNavigator();

........

<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
  <Stack.Navigator>
    <Stack.Screen name="root" component={BottomTabNavigator} options={{headerTransparent: true}}/>
  </Stack.Navigator>
</NavigationContainer>

这是我的BottomTabNavigator.js，和expo提供的模板代码非常相似。

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBarIcon from '../components/TabBarIcon';
import …

我有一个放在堆栈中的登录屏幕。用户成功登录后，他将被重定向到主屏幕，这是一个抽屉屏幕。抽屉屏幕的选项之一是注销，因此单击它时用户应该注销。以下是我的注销屏幕代码。我只是在 ui 中显示注销屏幕的进度条，但在useEffect钩子中，我正在调用以下方法

navigation.navigate({index: 0, routes: [{name: LOGIN_SCREEN}]});

但我收到一条错误消息You need to specify name or key when calling navigate with an object as the argument，我被重定向到主屏幕。当我完全重新启动我的应用程序时，它只会移动到登录屏幕。我正在为 name 键传递正确的值。

我的导航堆栈如下所示

 <Stack.Navigator>

      <Stack.Screen
        name={LOGIN_SCREEN}
        component={LoginScreen}
        options={{headerShown: false}}
      />
     <Stack.Screen
        name={HOME_STACK_SCREEN}
        component={DrawerStack}
        options={{headerShown: false}}
      />...

我的抽屉组件如下

<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={Home}
        options={{
         ...
        }}
      />
     <Drawer.Screen
        name={LOGOUT_SCREEN}
        component={Logout}
        options={{
         ...
        }}
      />

当前行为

嗨，大家好，

我想为底部选项卡设置背景颜色。所以我做了如下。

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

问题是 SafeArea 有白色背景

预期行为

我期望的是

那么你能告诉我如何在 React Navigation 版本 5 中解决这个问题吗？谢谢！

您的环境

iOS 反应原生：0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/bottom-tabs: ^5.0.5

我更改了背景颜色以使其更明显。我希望红色容器变得透明。

有没有办法实现这一目标？我正在使用 react-navigation 5 并根据Bottom-tab-navigator创建了一个自定义底部标签栏

我用于底部栏的代码如下

import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');

export enum Item {
  Home,
  ProfileView,
}

const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];

          const isFocused = state.index === index;

          const onPress = () => {
            const event = …

在以下简化示例中，用户使用 TextInput 更新标签状态，然后单击标题中的“保存”按钮。在提交函数中，当请求标签状态时，它返回原始值“”而不是更新后的值。

需要对导航 headerRight 按钮进行哪些更改才能解决此问题？

注意：当“保存”按钮位于渲染视图中时，一切都会按预期工作，只是当它位于标题中时则不然。

import React, {useState, useLayoutEffect} from 'react';
import { TouchableWithoutFeedback, View, Text, TextInput } from 'react-native';

export default function EditScreen({navigation}){
  const [label, setLabel] = useState('');

  useLayoutEffect(() => {
      navigation.setOptions({
        headerRight: () => (
          <TouchableWithoutFeedback onPress={submit}>
            <Text>Save</Text>
          </TouchableWithoutFeedback>
        ),
      });
    }, [navigation]);

  const submit = () => {
    //label doesn't return the updated state here
    const data = {label: label}
    fetch(....)
  }

  return(
    <View>
      <TextInput onChangeText={(text) => setLabel(text) } value={label} />  
    </View>
  )

}

问题：

React Navigation V5 + Redux Saga：如何从 Saga 导航？我试过使用CommonActions.navigate()，但这不起作用。我在这里错过了什么吗？

我想在传奇中进行所有导航，以防传奇中出现问题，用户未导航到屏幕。

React Navigation V5 文档：CommonActions

Saga.js（不工作）：

// React Navigation: Sign Up
yield CommonActions.navigate('Sign Up');

Saga.js（也不起作用）：

// React Navigation: Sign Up
yield CommonActions.navigate({ name: 'Sign Up' });

AuthNavigator.js

// Auth Navigator
export const AuthNavigator = () => {
  return (
    <AuthStack.Navigator initialRouteName="Login">
      <AuthStack.Screen
        name="Login"
        component={Login}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen
        name="Sign Up"
        component={SignUp}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen
        name="Sign Up Confirm"
        component={SignUpConfirm}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen …

我已经使用createMaterialBottomTabNavigatorredux 来更改徽章文本。这是代码：

class Router extends React.PureComponent {


  constructor(props) {
    super(props);


    this.state = {}
  }
   componentDidMount() { 

    this.props.appAct()
    this.props.getCartAct()
  }

  HomeStack = () => (
    <Stack.Navigator headerMode={'none'}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Product" component={ProductStack} />
    </Stack.Navigator>
  )
  CartStack = () => (
    <Stack.Navigator headerMode={'none'}>
        <Stack.Screen name="Cart" component={CartScreen} />
        <Stack.Screen name="Product" component={ProductStack} />
    </Stack.Navigator>
 )



  render() {


    let { internet, showIntro } = this.props;

     if (!internet) return <NoInternetScreen />
     if (showIntro) return <AppIntro />

    return (
      <NavigationContainer ref={navigationRef}>
      
       <Tab.Navigator
            style={{ …

我正在 React Native 和 Expo 中练习一个非常基本的项目。该项目不使用弹出的项目，因此我无法直接与特定平台（Android 和 iOS）的项目交互，我希望它保持这种状态。

几天前，当我尝试编辑登录表单的字段时，我在 Android 中看到了一个问题。事实证明，在键盘打开之前，出现了一个白色的小闪光。正如我在 GitHub 上阅读的几乎所有 Expo 页面一样，这是因为应用程序具有应用程序的空白视图，并且可以在这些平台的项目中更改此行为（我之前提到过，我没有）并且我本周一直在寻找一种方法来实现这一目标，然后我找到了这个文档，但我仍然不知道这是否有效以及是否可以更改所述根视图颜色： https: //docs.expo.io/版本/最新/sdk/注册根组件/

键盘问题的视频：https://i.stack.imgur.com/uOvZl.jpg

我遇到的错误与此视频中的错误相同，但我不知道是否有办法解决该问题，因为我必须使用它来React Navigation v5创建导航堆栈。另外，我使用黑色作为背景，这使得这种行为更加明显。

我尝试过不同的方法，例如更改键盘的布局模式（但这使我失去了滚动的能力），也使其对视图的响应更加灵敏，KeyboardAvoidingView但这ScrollView是不可能的。

这是我正在使用的：

• 世博 SDK 39
• 世博 CLI：3.28.5
• 反应导航 v5

这是一些代码：

package.json dependencies

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.10.6",
    "@react-navigation/native": "^5.8.6",
    "@react-navigation/stack": "^5.12.3",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-web": "~0.13.12"
  }, …

我一直在使用 Expo 和 React-navigation 在移动设备和桌面设备上进行开发，到目前为止，它非常棒！但是，我需要在移动设备和桌面抽屉中显示底部选项卡。我在较小和较大的屏幕上应用不同的导航器时遇到了一些麻烦。我们希望在移动设备中显示选项卡，并在大屏幕中显示侧边栏。移动设备和大屏幕之间的路线结构不同。例如： 在移动屏幕中：

• 主导航器
  • 选项卡导航器
    • 屏幕A
    • 屏幕B
    • 屏幕C
  • 配置文件堆栈导航器
  • 设置堆栈导航器 在移动设备中，我们只希望 3 个屏幕位于选项卡内，而另一个屏幕不应显示选项卡。在较大的屏幕中：
• 主导航器
  • 抽屉导航器
    • 堆栈A
      • 屏幕A
      • 配置文件堆栈导航器（将堆栈放在这里，因为我们不希望配置文件堆栈导航器显示在抽屉项目列表中）
    • 堆栈B
      • 屏幕B
      • 设置堆栈导航器
    • 堆栈C
      • 屏幕 C 请注意，在较大的屏幕中，我们希望每个屏幕都位于抽屉导航器内（因为侧边栏将是持久的）

我们可以做的第一件事是进行条件渲染（基于尺寸），但是会出现几个问题：

1. 我们如何在屏幕上输入这个内容？
2. 结构不同，我们该如何导航？（路径也会不同，对吗？）

我正在考虑创建某种导航包装器，它将接收导航和当前屏幕作为参数。但对此并不确定。如果大家有什么想法或经历过，请分享！提前致谢！