标签: 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/

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

如何在ReactNavigation中为标题的后退箭头提供自定义导航？我希望标题中的后退箭头导航到我定义的屏幕，而不是上一个屏幕。

谢谢。

我对本机反应还很陌生。我正在尝试为我的应用设置一些全局标题样式，但是它不起作用

route.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import SplashScreen from '../screens/SplashScreen';
import CalendarScreeen from '../screens/CalendarScreen';

const NavStack = createStackNavigator(
    {
        Splash: {
            screen: SplashScreen,
            navigationOptions: {
                header: null
            },
        },
        Calendar: {
            screen: CalendarScreeen,
            navigationOptions: {
                title: 'Calendar',
            },
        },
    },
    {
        initialRouteName: 'Calendar',
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#28F1A6',
                elevation: 0,
                shadowOpacity: 0
            },
            headerTintColor: '#333333',
            headerTitleStyle: {
                fontWeight: 'bold',
                color: '#ffffff'
            }
        } …

我想将仪表板加载为 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 中传递函数是一个问题，那么实现将数据从页面发送到父页面的相同功能并解决此警告消息的最佳方法是什么？

我正在使用materialTopTabs，似乎这会在安装后加载导航器中的所有屏幕。我有一个屏幕列表，其中有一个带有 2 个屏幕的选项卡导航器：Posts和Users。这两个屏幕都取决于从List传递的参数。但是，我只能使用此方法将参数传递到屏幕之一：

navigation.navigate('PostsTabNav', {
  params: {
    network: item,
  },
  screen: 'NetworkPosts' //or NetworkUsers
});

我试图通过这样做直接将参数传递给我的导航器：

navigation.navigate('PostsTabNav', {
  network: item
});

第一个选项只允许我传递到一个屏幕。第二个选项允许我像这样访问导航器中的参数：

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network; //params here

    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
        </PostsTabNav.Navigator>
    );
};

有没有办法传递temp到我的两个屏幕？如果没有，有没有更好的方法来处理这种情况？

这是代码 StackNavigator

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return ( …

我怎样才能在本机反应中实现这一点？

到目前为止，我有这个，我想实现中间曲线。我不知道是用透明视图处理它还是完全切换到 SVG

这是tabBar组件

/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'

export default class TabBar extends Component {
  render() {
    let {
      renderIcon,
      getLabelText,
      activeTintColor,
      inactiveTintColor,
      onTabPress,
      onTabLongPress,
      getAccessibilityLabel,
      navigation,
      showLabel,
    } = this.props

    let { routes, index: activeRouteIndex } = navigation.state

    return (
      <View style={styles.tabBar}>
        {routes.map((route, routeIndex) => {
          let isRouteActive = routeIndex === activeRouteIndex
          let tintColor = …

我是本机反应的新手。我正在尝试使用 react-navigation 5 实现导航。我有两个屏幕主页和个人资料。这两个组件都收到了导航道具，但打字稿给了我以下错误

Binding element 'navigation' implicitly has an 'any' type.ts(7031)

如何摆脱这个错误。

先感谢您

注意 - 我正在使用打字稿

应用程序.tsx

import 'react-native-gesture-handler';

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

const Stack = createStackNavigator();

import Home from './screens/home'

const App  = () => {

  const ProfileScreen = ({}) => {
    return <Text>This is Jane's profile</Text>;
  };
  
  return (
    <NavigationContainer>

    <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>

  </NavigationContainer>

  );
};

主页.tsx

import React from 'react';
import …