标签: react-navigation

反应导航版本4.3.9

我的 iOS 模拟器发出了一个烦人的警告，但除此之外它可以工作。

我有一个带有多个屏幕的堆栈导航器。我的 App.js 文件加载堆栈导航器并显示第一个屏幕。它是一个控制台屏幕，带有许多按钮，可从堆栈导航器加载屏幕。

我希望第一个控制台屏幕没有标题，因为它不适合设计师的布局。

这工作正常：

  const PlanCalcNavigator = createStackNavigator({
   Console: {
     screen: ConsoleScreen,
     navigationOptions: {
       header: null // hides header in first screen
     }
   },
   PlanEvent: PlanEventScreen,
   Calc: CalculatorScreen,
  },
 );

但我的 iOS 模拟器不断抛出“NavigationOptions”中的弃用：-“header: null”将被删除”警告，这非常烦人。

我可以使用其他不会引发错误的术语吗？

headerMode：“无”不起作用。它不会引发错误，但控制台屏幕会显示标题。

有许多类似的问题已得到解答，但没有一个使用最新的反应导航版本。我想在按后退按钮时从“文档”屏幕转到“主页”屏幕。这是我尝试过的，但它不起作用。

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Camera" component={CameraScreen} />
    <Stack.Screen name="Document" component={Document} options={{
      headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
    }} />
  </Stack.Navigator>
</NavigationContainer>

编辑以获得更多说明：我的应用程序从“主页”开始，然后转到“相机”，然后转到“文档”。现在，当我按下手机的后退按钮时，我不想在进入“文档”时返回“相机”，而是直接返回“主页”。根据文档，这是如何覆盖后退按钮。

<Screen
  name="Home"
  component={HomeScreen}
  options={{
  headerLeft: (props) => (
   <HeaderBackButton
     {...props}
     onPress={() => {
       // Do something
     }}
   />
 ),

}}/>；但我不知道如何使用上面的代码去“主页”。所以我搜索了类似的问题，其中大多数都有navigationOptions其他内容。我尝试遵循以下问题的答案。

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}

所以是的，即使我使用 console.log，后退按钮也没有响应

HomeStackNavigator(stack)
---HomeTabsNavigator(Tab)
   ---FirstTab(stack)
      ---CreatePost(screen)
      ---Posts(Tab)
         ---Following(screen)
         ---Feed(screen) <----- functional component in here, lets call it component1
   ---SecondTab
      ...
---Screen2

我希望能够从提要屏幕中的功能组件导航到屏幕 2。我尝试查看 React Native 文档中的嵌套导航文档，但没有成功。

我正在尝试使用 React-navigation 为 React Native 制作一个可重用的 SplitView 组件，其中父导航器能够对其子导航器执行导航。为了实现此目的，我使用 ref 以编程方式在嵌套导航器上执行导航。但是，我遇到了一个问题，当我的应用程序重新呈现时，我的所有导航引用都会变成：

{ current: null }

我无法执行任何进一步的导航。

这是演示此问题的Snack 项目的链接。请注意，您必须取消第 13-17 行的注释App.js才能看到该问题。注释掉的 useEffect 用于强制初始重新渲染。没有它，导航就可以正常工作。

“在没有导航道具的情况下导航”的文档有一些关于此用例的初始化问题的注释，但我对他们建议的解决方案没有任何运气。我认为他们提到的问题是导航容器有机会安装之前的竞争条件 - 我不认为这就是发生在我身上的事情，因为似乎一旦我的应用程序重新渲染，我就永远无法访问正确的参考号。

我对 React Native 完全陌生，正在为我们的一个客户构建一个应用程序。

我创建了一个屏幕，显示名称列表，这些名称可以按字母顺序显示或按类别分组。我使用该react-native-tab-view组件来完成这项工作。这两个选项卡中的每一个都呈现其各自的屏幕组件，ScreenMapAlpha（显示 FlatList）和ScreenMapCategory（显示 SectionList）。

对于renderItem这些列表的每个道具，我想使用 TouchableOpacity 使每个项目都可点击，就像详细信息页面一样，但是当我不断收到此消息时，我无法让 navigation.navigate() 函数正常工作：

类型错误：未定义不是对象（正在评估“_this3.props.navigation.navigate”）

我一直在阅读react-native-tab-view Github 文档，但我找不到将导航对象传递到两个 Alpha/Category 屏幕组件以使其工作的方法。

我的代码如下所示：

import * as React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import ScreenMapAlpha from '../screens/map_alpha';
import ScreenMapCategory from '../screens/map_cat';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = { width: Dimensions.get('window').width };

const renderTabBar = props => (
  <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: '#fff' }}
    style={{ …

我已经使用react-navigation版本5创建了嵌套导航，但是当选项卡屏幕渲染时我需要隐藏顶部栏，我已经按照这里的步骤https://reactnavigation.org/docs/hiding-tabbar-in-screens/但仍然不起作用

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

import {navigationRef} from './NavigationService';

import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Stack = createStackNavigator();

const homeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

const HomeStack = () => …

我感到惊讶的是useLinkTo，类似的 ( useNavigation) 只能在导航器屏幕内使用，而它们真正需要的只是NavigationContainer.

因为我的场景是一个包装整个应用程序的通知系统，其通知应该能够链接到应用程序中的其他部分。

<NavigationContainer linking={linking}>
  <Notifications>
    <RootStack/>
  </Notifications>
</NavigationContainer>

现在它位于RootStack像这样的钩子之外useLinkTo，useNavigation不起作用并抱怨缺少上下文：

“找不到导航对象。您的组件是否位于导航器的屏幕内？”

是否有使用裸露导航容器（参考）进行深度链接的解决方法？

我尝试将Notifications提供者移至内部RootStack，但这没有帮助。

我的项目结构是这样的：

• app.js（加载数据和抽屉导航器）

• 主屏幕（使用之前在预览模式下获取的数据加载卡片，当您单击时，您将拥有一个可以获取该记录的完整数据的 NewsComponent）

• NewsScreen（使用之前获取的数据加载完整的文章）

在我的 App.js 中，我使用的是这样的抽屉导航器：

return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Main">
          <Drawer.Screen name="Main" options={{ headerShown: false}}>
            {props => <MainScreen {...props} extraData={App.news} />}
          </Drawer.Screen>
          <Drawer.Screen name="Court Reservation" component={CourtReservation}></Drawer.Screen>
          <Drawer.Screen name="News" component={NewsScreen}></Drawer.Screen>
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }

但我需要在主组件内插入一个堆栈导航器，以便显示记录（NewsScreen），因为如果没有，当我返回到列表（主）并再次到不同的记录时，内容不会更新，并且第一条记录是正在显示。

我尝试了几次，但遇到了各种各样的错误。现在我的主屏幕是这样的：

render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button onPress={() => this.props.navigation.openDrawer()} transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <FlatList
          data={this.state.news}
          onEndReached={this.fetchMoreNews}
          onEndReachedThreshold={0.5}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({item}) => (
            <Content>
          <CardNewsComponent data={item} nav={this.props.navigation}/>
          </Content>
          )}/>
        </Container>
    ); …

我在反应本机应用程序中使用反应导航。因此，我按照https://reactnavigation.org/docs/custom-android-back-button-handling/上的文档使用此代码片段实现自定义 Android 后退按钮行为。

屏幕一.js

import React, {useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import {
 View,
 Text,
 BackHandler,
} from 'react-native';

export function ScreenOne({navigation}) {
 
 useFocusEffect(
   useCallback(() => {
     const onBackPress = () => {
       if (isSelectionModeEnabled()) {
         disableSelectionMode();
         return true;
       } else {
         return false;
       }
     };

     BackHandler.addEventListener('hardwareBackPress', onBackPress);

     return () =>
       BackHandler.removeEventListener('hardwareBackPress', onBackPress);
   }, [isSelectionModeEnabled, disableSelectionMode])
 );

 return (
   <View>
     <Text>Demo</Text>
   </View>
 )
}

堆栈.js

import React from 'react';
import {createStackNavigator, HeaderBackButton} from '@react-navigation/stack';
import { …

当我打开发布版本时，我收到以下错误。它在 IOS 和 Android 中都会发生。

E/AndroidRuntime：致命异常：mqt_native_modules进程：com.package.name，PID：28695 com.facebook.react.common.JavascriptException：ReferenceError：找不到变量：typeAnnotation，堆栈：@980：17088 v@2：1473 @979:425 v@2:1473 @978:339 v@2:1473 @971:6338 v@2:1473 @970:139 v@2:1473 @969:218 v@2:1473 @968:117 v @2:1473 @882:1330 v@2:1473 @545:542 v@2:1473 @406:344 v@2:1473 @6:57 v@2:1473 d@2:875 全局代码@1766： 3 在 com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83) 在 java.lang.reflect.Method.invoke(本机方法) 在 com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper .java：372）在com.facebook.react.bridge.JavaModuleWrapper.invoke（JavaModuleWrapper.java：151）在com.facebook.react.bridge.queue.NativeRunnable.run（本机方法）在android.os.Handler.handleCallback (Handler.java:789) 在 android.os.Handler.dispatchMessage(Handler.java:98) 在 com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) 在 android.os.Looper。循环（Looper.java：164）在com.facebook.react.bridge.queue.MessageQueueThreadImpl $ 4.run（MessageQueueThreadImpl.java：226）在java.lang.Thread.run（Thread.java：764）

项目信息

System:
OS: macOS 11.0.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 111.48 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
 Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.22.5 - …