标签: react-navigation

我使用DrawerNavigator,我有3页:Router page,mainScreen和photos page,
我maked头导航栏区域,我用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>在mainScreen打开抽屉菜单,并使用提供的照片太过页面,菜单是确定在mainScreen,但是当我点击<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>的照片页面,我收到此错误:
我该如何解决这个问题？

我的照片页面:

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button …

我将在我的项目中设计一个抽屉导航。

我通过这个命令安装了它：

npm install @react-navigation/drawer

然后将其导入 App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

这是我的package.json内容：

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^4.1.1",
"react-navigation-stack": "^2.1.0",

这是我的App.js内容：

npm install @react-navigation/drawer

我应该说我已经创建了Login和SecondPage组件并在一个名为的文件中声明了它们root.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

但我收到一个错误（以下屏幕）。

我怎样才能解决这个问题？

索引.js

"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/drawer": "^5.0.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.6",
"react-native-reanimated": …

假设我在StackNavigator应用程序中浏览了4个屏幕,现在我想回到第一个屏幕.似乎有三种不同的方法可以做到这一点,它们会导航到我想要做的地方,但每种方式都有一个循环每个前一个屏幕的动画.

有没有干净的方式从导航SCREEN_D到SCREEN_A？

换句话说,在看到向后导航之前,我不希望看到SCREEN_C和SCREEN_B分裂一秒钟SCREEN_ASCREEN_D

navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);

三种方法:

1.

return this.props.navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: 'SCREEN_A'})]
                  }));

2.

 const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)

3.

const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: 'First'},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}

我想回去两个屏幕.目标是从EditPage去Cover.这是我的导航堆栈:

Main -> Cover -> EditCover -> EditPage

我阅读了文档,它说要提供你想要返回的屏幕的键,这是我的代码:

this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));

我也尝试过(没有运气):

this.props.navigation.dispatch(NavigationActions.back('EditCover'));
this.props.navigation.dispatch(NavigationActions.back({key: 'EditCover'}));
this.props.navigation.dispatch(NavigationActions.back({routeName: 'EditCover'}));
this.props.navigation.goBack('EditCover');
this.props.navigation.goBack({key: 'EditCover'});
this.props.navigation.goBack({routeName: 'EditCover'});

关于这一切的有趣之处在于我没有错误.调用代码时没有任何反应......

PS如果我想回到一个屏幕,这段代码工作正常:

this.props.navigation.goBack(null);

PSS如果在有解决方案之前有人遇到过此问题.这个黑客现在有效:

this.props.navigation.goBack(null);
this.props.navigation.goBack(null);

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

我在我的react-native项目(expo)中使用typescript.

该项目使用反应导航,所以在我的屏幕上我可以设置navigationOptions并且我可以访问道具navigation.

现在我正在尝试强类型这些,所以我得到了可用于设置的属性的提示.

interface NavStateParams {
    someValue: string
}

interface Props extends NavigationScreenProps<NavStateParams> {
   color: string
}

class Screen extends React.Component<Props, any> {
    // This works fine
    static navigationOptions: NavigationStackScreenOptions = {
        title: 'ScreenTitle'
    }
    // Does not work
    static navigationOptions: NavigationStackScreenOptions = ({navigation, screenProps }) => ({
        title: navigation.state.params.someValue
    })
}

什么是处理反应导航作为组件道具的最佳方法.

React Native 新手：我使用 Expo init 启动了一个全新的项目，然后我按照 https://reactnavigation.org/docs/hello-react-navigation 中提到的说明操作我使用 expo start 运行该项目，但出现此错误。不变违规：“主要”尚未注册。在以下情况下可能会发生这种情况：

• Metro（本地开发服务器）从错误的文件夹运行。检查 Metro 是否正在运行，将其停止并在当前项目中重新启动。
• 模块因错误而AppRegistry.registerComponent无法加载且未被调用。

不变 browser.js:38:14 runApplication AppRegistry.js:193:13 __callFunction MessageQueue.js:425:19 __guard$argument_0 MessageQueue.js:112:6 __guard MessageQueue.js:373:10 callFunctionReturnFlushedQueue MessageQueue.js:111:4 callFunctionReturnFlushedQueue [native code]:0 有什么建议吗？

我有两个屏幕：

屏幕A

import React, { useState } from "react";
import { Text, View, Button } from "react-native";
const ViewA = ({ navigation }) => {
  const [val, setVal] = useState(null);
  const [val2, setVal2] = useState(null);
  const callBack = (value1,value2) => {
    setVal(value1);
    setVal2(value2);
  };
  const onNextPress = () => {
    navigation.navigate("Second Screen", { callBack: callBack });
  };
  return (
    <View>
      <Text>{val}{val2}</Text>
      <Button title="Next" onPress={onNextPress} />
    </View>
  );
};
export default ViewA;

屏幕B

import React from "react";
import { View, Button …

我正在将 RN 项目版本 4 迁移到 5。

切换屏幕时出现白色背景闪烁的问题。在 v4 中，通过cardStyle: { backgroundColor: material.containerBgColor }在StackNavigation选项中设置解决了这个问题。

但是在 v5 中，我无法使用相同的方法修复它：

<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>

白光又回来了。知道如何修复它吗？谢谢。

更新：导航的结构可能很重要：

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

从 ScreenD …

我想知道如何从嵌套在材料底部标签栏上的堆栈导航器内的特定屏幕隐藏底部标签栏

这是我的堆栈导航器代码

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import PondScreen from '../screens/PondScreen/PondScreen';
import PondDetailScreen from '../screens/PondScreen/PondDetailScreen';

const Stack = createStackNavigator();

export function PondStack() {
  return (
    <Stack.Navigator
      initialRouteName="PondScreen"
      headerMode="none"
      mode="card"
    >
      <Stack.Screen
        name="PondScreen"
        component={PondScreen}
      />
      <Stack.Screen
        name="PondDetailScreen"
        component={PondDetailScreen}
        options={{
          tabBarVisible: false
        }}
      />
    </Stack.Navigator>
  );
}

这是我的材料底部选项卡导航器的代码

import React from 'react';
import { View } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Entypo, Feather } from '@expo/vector-icons';
import { PondStack } from './StackNavigators'; …