标签: react-navigation

我正在努力解决我希望是一个简单的问题。我有多个 StackNavigator，每个 StackNavigator 都有不同的屏幕，除了 .navigate 之外，我还使用抽屉在主堆栈之间移动。像这样：

• 主堆栈
  • 主屏幕（进入）
  • 会员简介
• 收件箱堆栈
  • 收件箱屏幕
  • 消息详情屏幕

在消息详细信息屏幕上，用户可以导航到“个人资料”。所以“消息详细信息”>“个人资料”。这非常有效，就像整个应用程序一样。同一堆栈中的导航无论向前还是向后都非常有效。我正在使用标准 .navigate 继续前进。

this.props.navigation.navigate('MemberProfilePage')

但是，如果我点击后退按钮 - 或设置自定义后退按钮 - 用户将一路返回主屏幕。如果我点击抽屉中的“收件箱”，屏幕仍将显示“消息详细信息”。

但我真的只想去：消息详细信息 > 个人资料...个人资料 goBack() 到消息详细信息。

我尝试过默认的 goBack()，我尝试过像这样调度一个后退操作：

const backAction = NavigationActions.back({
  key: 'ProfileScreen'
})

或者

const backAction = NavigationActions.back({
  key: null
})

感谢您的任何指导。

编辑：关于在抽屉中设置后退按钮的初步建议似乎有效。但这并不能解决问题。

我不想返回到当前堆栈的初始屏幕。我想返回到我导航的屏幕，该屏幕位于不同的堆栈中。

headerBackTitle有没有办法设置的颜色Stacknavigator？

navigationOptions: ({ navigation }) => ({
    ...
    headerBackTitle: "Back",
    }),
    ...

根据标题的背景颜色，标题headerBackTitle不可读。

我在我的应用程序中使用反应导航。如果我从 导航screen A到Screen B，如果转换完成，我如何获得一些反馈。

我正在尝试在react-native 和expo 中使用react-navigation-redux-helpers 将redux 与react-navigation 集成。然而，尽管我遵循了文档，但我收到以下错误。

该导航器同时具有导航和容器属性，因此尚不清楚它是否应该拥有自己的状态。如果导航器应从导航道具获取其状态，则删除道具：“nav”。如果导航器应保持其自己的状态，请不要传递导航道具。

以下是我与 redux 和 React-navigation 实现相关的代码。

AppNavigator.js

import React from 'react';
import {createSwitchNavigator, createStackNavigator} from 'react-navigation';
import {connect} from 'react-redux';
import {reduxifyNavigator,createReactNavigationReduxMiddleware} from "react-navigation-redux-helpers";

import MainTabNavigator from './MainTabNavigator';


export const AuthStack = createStackNavigator(
    {
        Main: MainTabNavigator,
    },
    {
        headerMode: 'none'
    }
);

export const AppNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
    },
    {
        headerMode: 'none',
        initialRouteName: 'Auth',
    }
);


export const NavMiddleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav,
);

const addListener = reduxifyNavigator(AppNavigator, 'root');


const …

我正在使用 TabNavigator，我想预加载所有路线，以便用户第一次导航到其中一个选项卡时不会遇到任何滞后。

当我尝试从我的 WordPress API 中提取图像 source_URL 时，出现TypeError: Undefined is not an object (evaluating 'subitem.media_details.sizes.medium.source_url') 。

https://i.stack.imgur.com/rhSZc.jpg

https://i.stack.imgur.com/T4PMO.jpg

上面附图中的错误消息指向以下代码行

{this.state.data && this.state.data.length > 0 && ( this.state.data.map(post => (

{post.featured_media > 0 && post._embedded['wp:featuredmedia'].filter(element => element.id == post.featured_media).map((subitem, index) => (

source={{ uri: subitem.media_details.sizes.medium.source_url }}

我已经查看了来自 WordPress API 的 JSON 数据，并且肯定有一个 URL。

 class HomeScreen extends React.Component {

 constructor(){
 super();
  this.state = {
      data: null,
      loaded: true,
      error: null
   }
}
baseURL = 'https://wordpress-URL';

getData = (ev)=>{
this.setState({loaded:false, error: null});
let url …

我正在将“react-navigation 3.11.0”与我的react native expo应用程序一起使用，并且我有以下导航结构。

const orderStackNavigator = createStackNavigator(
  {
    orders: {
      screen: Orders
    },
    orderdetail: {
      screen: OrderDetail
    },
    ordermoredetails: {
      screen: OrderMoreDetails
    },
    ordernotes: {
      screen: OrderNotes
    },
    orderbillingdetails: {
      screen: OrderBillingDetails
    },
    orderdeliverydetails: {
      screen: OrderDeliveryDetails
    }
  },
  {
    //headerMode: 'none'
    defaultNavigationOptions: {
      headerStyle: [styles.headerStyle]
    }
  }
);

const inventoryManagerStackNavigator = createStackNavigator(
  {
    categories: {
      screen: Categories
    },
    products: {
      screen: Products
    },
    editProduct: {
      screen: EditProduct
    }
  },
  {
    //headerMode: 'none'
    defaultNavigationOptions: {
      headerStyle: [styles.headerStyle]
    }
  } …

我正在使用 TypeScript 创建一个由 Expo 管理的 React Native 应用程序，并且在 React Navigation 和 TypeScript 方面遇到了一些问题。

我想为 Tab.Screen 组件上的底部选项卡导航器指定图标。

这段代码可以工作，但会抱怨，因为 route.params 可能是未定义的（第 10 行）。

类型“对象”上不存在属性“图标”

我可以在 initialParams 上制作所需的图标道具吗？

我在没有任何运气的情况下查看了文档。

const App: React.FC<{}> = () => {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ size, color }) => (
              <MaterialIcons
                size={size}
/* ===> */      name={route.params.icon}
                color={color}
              />
            ),
          })}
        >
          <Tab.Screen
            name="EventListView"
            initialParams={{ icon: 'view-agenda' }}
            component={EventListScreen}
          />
          <Tab.Screen
            name="CreateEvent"
            initialParams={{ icon: 'public' }}
            component={SettingsScreen}
          />
        </Tab.Navigator>
      </NavigationContainer> …

由于 React Navigation 从版本 4 传递到版本 5，我无法找到如何显示图标而不是标签。我用过像这里这样的东西，但我得到了

创建导航器不需要参数。也许您正在尝试将 React Navigation 4 API 与 React Navigation 5 结合使用

我找不到如何为我的每个屏幕传递 tabBarIcon ..

附上我的简化代码，有人可以帮助我吗？

import React, { useState } from 'react'
import { Icon } from 'react-native-elements'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'

import OverViewComponent from '..'
import MatosComponent from '..'
import PhotographerComponent from '..'

const Tab = createMaterialTopTabNavigator()

export default function App() {
  const [start, setstart] = useState(
    new Date(xxxxx)
  )
  const …

我无法让堆栈导航器响应本机工作。我只是制作空白堆栈导航器以进入bottomTabsNavigator。我收到一个关于使用 route.key 的错误。即使我制作了一个简单的 Stack 导航器，我仍然会收到此错误，并且似乎在网上的任何地方都看不到任何提及。任何帮助将不胜感激:)

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

import Icon from 'react-native-vector-icons/MaterialIcons';
import CartScreen from './screens/CartScreen'
import RecipeScreen from './screens/RecipeScreen'
import ProfileScreen from './screens/ProfileScreen'

const Stack = createStackNavigator();


function Navigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                screenOptions={({ route }) => ({
                    headerStyle: {
                        backgroundColor: 'salmon',
                    },
                    headerTintColor: 'white',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                })}
                tabBarOptions={{
                    showLabel: false,
                    activeTintColor: 'white',
                    inactiveTintColor: …