标签: react-navigation

我是 react-native 的初学者，当我安装并尝试使用 react-navigation import {StackNavigator} from 'react-navigation' 时遇到以下错误；我尝试了很多链接来解决这个问题，但没有找到任何解决方案。以下是链接：

无法解决“反应导航”

https://github.com/react-community/react-navigation/issues/1846

https://github.com/facebook/react-native/issues/4968/

请帮我解决问题。提前致谢。

我想将仪表板加载为 react Native 底部选项卡中的活动选项卡。每当仪表板加载时导航，但每当我移动到仪表板时，它都会移动到收件箱屏幕，这是我的反应底部选项卡导航中的第一个元素。有没有办法在使用屏幕底部选项卡时创建默认屏幕？

我用于底部导航的代码是

 dashboard: {
        screen: createBottomTabNavigator({
            inbox: {
                screen: Chat,
                navigationOptions: ({ navigation }) => ({
                    title: 'Inbox',
                }),
            },
            favourite: {
                screen: Favourite,
                navigationOptions: ({ navigation }) => ({
                    title: 'Favourite',
                }),
            },
            dashboard: {
                screen: Dashboard,
                navigationOptions: ({ navigation }) => ({
                    title: 'Home',
                    initialRouteName: 'dashboard'
                }),
            },
            setting: {
                screen: SettingScreen,
                navigationOptions: ({ navigation }) => ({
                    title: 'Setting',
                }),
            },
            survey: {
                screen: NutritionistSurvey,
                navigationOptions: ({ navigation }) => ({
                    title: 'Survey',
                }), …

我正在react-navigation-drawer从 React 导航库实现。但面临与标题相关的问题。标题栏未显示在任何屏幕中。

这是我的 App.js

import React from "react";
import { StyleSheet, ScrollView, View } from "react-native";
//import DrawerNavigator from "./navigation/DrawerNavigator";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import Home from "./components/home";
import Contact from "./components/contact";

const WIDTH = Dimensions.get("window").width;
const RouteConfigs = {
  Home: {
    screen: Home
  },
  Contact: {
    screen: Contact
  }
};
const DrawerNavigatorConfig = {
  drawerWidth: WIDTH * 0.75,
  drawerType: "both",
  initialRouteName: …

据我了解，应该这样做，以便 useFocusEffect 可以作为 useEffect 进行测试（模拟）。我使用 useFocusEffect 来获取数据：

useFocusEffect(
  useCallback(() => {
    fetchData();
  }, [fetchData]),
);

错误消息： react-navigation 挂钩需要导航上下文，但无法找到。确保您没有忘记创建和渲染反应导航应用程序容器。如果需要访问可选的导航对象，可以使用useContext(NavigationContext)，它可能会返回

封装版本：

"jest": "^24.9.0",
"react-native": "0.61.2",
"react-navigation": "^4.0.10",
"react-navigation-hooks": "^1.1.0",
"@testing-library/react-native": "^4.0.14",

我在我的 GraphQL Apollo 客户端项目中使用https://reactnavigation.org/（版本 5.0.1）。

我有一个带有表单的页面，用户需要在其中从列表中选择一些选项。
在第一页中，我有一个带有以下代码的按钮：

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });

在标签页面上，我有这个：

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>

所以，基本上我在调用 时传递了一个函数navigation.navigate，我正在执行这个函数以将数据发送回初始屏幕。

这工作得很好，但是当我打开标签页时，我收到了这个警告：

我们在导航状态中发现了不可序列化的值，这可能会破坏诸如持久化和恢复状态之类的用法。如果您在 params 中传递不可序列化的值（例如函数、类实例等），则可能会发生这种情况

如果在 params 中传递函数是一个问题，那么实现将数据从页面发送到父页面的相同功能并解决此警告消息的最佳方法是什么？

我想禁用堆栈导航器标题部分的屏幕动画。

我通过在堆栈导航器中定义了一个通用的自定义标头screenOptions。

并具有屏幕转换的默认动画。我想确保动画仅发生在屏幕上，而不发生在我的标题组件上。由于标题将是静态内容。

我也尝试过制作headerModeasscreen和float但那没有帮助。我想看看是否有一个类似于animationEnabled标题组件的属性。

<Stack.Navigator
  screenOptions= {{
    headerMode: 'screen',
    animation: 'fade',
    header: (props) =>
        <Header {...props} />
  }}>
  // Rest of my screens
</Stack.Navigator>

我在带有更多选项按钮的标题中实现了一个弹出组件。此按钮仅在 上可用UserProfileScreen。当您按下它时，您会看到两个按钮：“设置”和“注销”。该问题与设置按钮有关。

预期行为： 按设置按钮 -> this.props.navigation.navigate('SettingsNavigator') 被调用 -> SettingsScreen 显示

实际行为： 按设置按钮 -> console.warn('go to settings') 被调用，仅此而已（您不会被重定向到 SettingsScreen）。

SettingsNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import SettingsScreen from './SettingsScreen';
import EditProfileScreen from './EditProfileScreen';
import RemoveProfileScreen from './RemoveProfileScreen';

const SettingsNavigator = createStackNavigator({
    SettingsScreen: SettingsScreen,
    EditProfile: EditProfileScreen,
    RemoveProfile: RemoveProfileScreen
}, {
    initialRouteName: 'SettingsScreen'
});

export default SettingsNavigator;

optionHeaderButton.js

import { withNavigation } from 'react-navigation';
...

class OptionsHeaderButton extends Component {

    ...

    navigateToSettings = () => { …

这是我使用 react navigation v3.2.1 的导航堆栈：

1. 我有一个切换导航器可以切换到身份验证导航堆栈和经过身份验证的应用程序堆栈。

2. 应用程序堆栈是使用底部选项卡导航器制作的。

3. 我想为选项卡导航器使用自定义组件。

使用createBottomTabNavigator自定义tabBarComponent.

例如：

1. 假设标签导航堆栈有 2 个导航屏幕，即主页和聊天。
2. 在自定义 BottomBar 中，如何检查焦点/活动/当前路由名称是否为 Home/Chat，以便我可以分别更改图标的样式？

应用容器.js

const switchStack = createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack
}, {
    initialRouteName: 'AuthLoading',
})

export default createAppContainer(switchStack)

AppStack.js

const AppStack = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
    },
    Chat: {
        screen: ChatStack
    },
}, {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    shifting: false,
    barStyle: {
        backgroundColor: '#694fad',
    },
    labeled: false,
    tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>
})

export …

由于分页和 React Native Navigation，我面临着一种复杂的问题。单击具有类别列表的抽屉，它们都将转到屏幕

问题陈述：

当我随机点击类别时，一切正常。但是，在分页过程中遇到问题。假设我单击类别消费者并滚动查看更多记录。之后，我单击移动类别。移动类别页面将显示一秒钟，然后调用之前的路线（消费者）。

我尝试使用以下代码来导航类别，但遇到了同样的问题。

代码：

1）。

this.props.navigation.navigate({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  },
  key: Math.random () * 10000
})

2）。

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({
    routeName: 'CategoryList',
    params: {
      cat_id: e.cat_id
    }
  })],
});
this.props.navigation.dispatch(resetAction);

3）。

const pushAction = StackActions.push({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  }
});
this.props.navigation.dispatch(pushAction);

正如您在下面看到的，我尝试了多种将背景颜色设置为绿色的方法，但都无济于事。背景像图像一样保持蓝色。

在inactiveColor和activeColor正在（白色，分别为红色）。

<NavigationContainer>

  <Tab.Navigator
    initialRouteName="HomeScreen"
    activeColor="red"
    inactiveColor="white"
    activeBackgroundColor="green"
    inactiveBackgroundColor="green"
    style={{ backgroundColor: 'green' }}
    tabBarOptions={{
      style:{
        backgroundColor: 'green'
      }
    }}
  >

    <Tab.Screen
      name="HomeScreen"
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    >
    {props => <HomeScreen {...props} state={this.state} />}
    </Tab.Screen>

    <Tab.Screen
      name="Files"
      component={FilesScreen}
      options={{
        tabBarLabel: 'Files',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="file" color={color} size={26} />
        ),
      }}
    />

  </Tab.Navigator>

</NavigationContainer>

包.json

"dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
  "@react-navigation/material-bottom-tabs": "^5.1.7",
  "@react-navigation/native": …