标签: react-navigation-v5

尽管我已经安装了所有相关的软件包并遵循了 react-navigation 指南（https://reactnavigation.org/docs/getting-started#installation），但我还是收到了 RNSScreen 错误，但没有任何效果对我有用。

使用 React Navigation，不同类型的导航器具有不同的操作（以编程方式）在屏幕之间导航。

例如，与常见的“导航”操作相比，StackNavigator 中的“弹出”、“推送”等具有详细记录的（不同）行为。

但对于 Drawer 和 TabNavigators，我们可以选择使用“jumpTo”。我无法理解“jumpTo”与“navigate”有何不同，以及何时使用什么？

文档只是说

JumpTo 操作可用于跳转到抽屉式导航器中的现有路线。

与“导航”相比，这有什么好处？

...允许导航到特定路线

更具体地说，使用 DrawerNavigation，这是如何实现的

props.navigation.navigate('Create meeting')

...工作方式与此不同

props.navigation.jumpTo('Create meeting');

...我什么时候应该使用哪个？

我正在尝试使用 React Navigation 制作如下图所示的标签栏。

我尝试了一些代码，但没有任何效果。一些代码来自之前的 React 导航版本。真正的问题是使标签栏从底部和两侧都有边距，并且边框是圆形的。

任何人都可以帮助我吗？！

我刚刚安装了 React 导航版本 6，收到以下错误

尝试在空对象引用上调用接口方法 boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()

下面是我的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React from 'react';

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,

} from 'react-native';

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

import Upload from './Screens/Upload';
import Display from './Screens/Display';

const Stack = createStackNavigator()

function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        name='Screen_A'
        component={Upload}
        >


        </Stack.Screen>
        <Stack.Screen …

以下是我的应用程序导航器的层次结构

？？？appNavigator（底部标签导航器）

• ？？？提要（堆栈导航器）

  • 后详细信息屏幕
  • 页面详细信息屏幕
  • 配置文件详细信息屏幕
  • ...其他屏幕

• ？？？通知（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

• ？？？个人资料（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

现在的问题是我必须复制所有堆栈中通用的屏幕（ProfileDetail、PostDetail 和 PageDetail），以便在堆栈中访问它们。

对于此用例，是否有更好的解决方案。我应该在哪里放置通用屏幕，以便它们在所有子堆栈中可用，并且我不必在任何地方复制它们。

这是我经历的一个开放的 github 问题，但找不到好的解决方案 Isuue

我试图隐藏在抽屉导航器中按下我的一个路线的能力，因为它是另一个导航器和应用程序中的默认位置。我希望抽屉仅用于导航到不适合其他地方的用户流程的无关路线。在 React Navigation 5 之前，我可以通过简单地设置drawerLabel: () => null. 但是现在有了变化，我无法弄清楚如何以相同的方式隐藏它。

以下是我当前的导航器代码：

const DrawerNavigator = () => {
    const dispatch = useDispatch();
    return (
    <MainDrawerNavigator.Navigator 
        drawerContent={props => customDrawerContent(props, dispatch)}
        drawerStyle={drawerStyle}
    >
        <MainDrawerNavigator.Screen 
            name="DrawerNav"
            component={MainTabNavigator}
            options={{
                drawerLabel: () => null,
                title: null,
                drawerIcon: () => null
            }}
        />

        <MainDrawerNavigator.Screen
            name="FAQNav"
            component={FAQStackNavigator}
            options={
                { 
                    drawerLabel: "FAQ", 
                    drawerIcon: ({tintColor}) => <EvilIcons name={'question'} size={30} color={tintColor} />
                }
            }
        />
    </MainDrawerNavigator.Navigator>
    )
}

const customDrawerContent = (props, dispatch) => {
    console.log(props.descriptors)
    return (
        <View style={{flex: …

我正在寻找创建一个堆栈导航器，可以处理两个屏幕之间的动画特定元素。Fluid Transitions看起来像一个我可以使用的库，但它不支持react-navigation5.X。如果有一个包具有用于 react-navigation v5 的此功能，那就太好了。

但是，如果 v5 没有当前包，我想扩展StackNavigator以处理这种功能。我已经能够StackNavigator使用类似于以下内容的内容删除 的默认动画（道具中的transitionbool 在哪里为：optionsStack.Screen

const CustomTransitionStackNavigator = ({
  initialRouteName,
  children,
  screenOptions,
  ...rest
}) => {
  if (descriptors[state.routes[state.index].key].options.transition) {
    return (
      <View style={{ flex: 1 }}>
        {descriptors[state.routes[state.index].key].render()}
      </View>
    );
  }

  return (
    <StackView
      {...rest}
      descriptors={descriptors}
      navigation={navigation}
      state={state}
    />
  );
};

我希望能够使用Context（或其他一些方法）将过渡进度传递给场景的后代以处理动画。有没有办法在 v5 中获得过渡进度？或者这CustomTransitionStackNavigator是否需要管理该状态？谢谢！

我正在尝试向我的 react-navigation 抽屉中的每个屏幕添加一个图标，但该图标没有出现。

这是我的代码：

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
        activeTintColor: 'white',
        inactiveTintColor: 'white',
        itemStyle: { alignItems:'flex-end' },
       }}>
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        
      </Drawer.Navigator>
    
  );
}


export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerTitleAlign:"center",
            headerRight: ({}) => <HeaderRight />,
            headerLeft: ({}) => <Search />
          }}
          component={Drawer}
          name="Drawer"
        />
        <Stack.Screen name="Product" component={Product} options={{title:"product"}} …

最近我开始使用 React Native0.61.5和 React navigation 5.x。现在我需要将父函数传递给子屏幕。例如，我想通过按下嵌套在 StackNavigator 中的 TabNavigator 选项卡中的按钮来更改导航栏图标。以前（导航版本 3.x）我getActiveChildNavigationOptions用于满足我的需要，但现在它已被删除。所以实现这个目标的唯一方法就是将自定义函数传递给子组件。

在示例代码中，我想从 更改XXXXXXXX为YYYYYYYYY：

const TabA = ({ route }) => (
  <View>
    <Text>Tab A</Text>
      <Button 
        title="Change header"
        onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
  </View>
)

const TabB = () => <><Text>Tab B</Text></>

const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
  const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");

  useLayoutEffect(() => navigation.setOptions({
    headerRight: () => <MyNavIcon name={headerRightName}/>
  }), [headerRightName]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab-a" …

当我尝试使用时import {createStackNavigator} from @react-navigation/stack，它给了我一个错误

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

我试图找到解决方案，但没有任何帮助。

在此处输入图片说明