标签: react-navigation

使用React Navigation选项卡导航器https://reactnavigation.org/docs/navigators/tab如何使其中一个选项卡按钮将屏幕推向全屏模式？我看到堆栈导航器有一个mode=modal选项.如何在单击TakePhoto选项卡按钮时使用该模式？点击它仍然显示底部的标签栏.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
  },
});

如何在react-navigation标题下隐藏阴影？
它们看起来像这样.

是否可以在React Navigation的标题标题中访问整个Redux状态？

在官方的文档说,对应导航状态是可访问:

  static navigationOptions = {
    title: ({ state }) => `Chat with ${state.params.user}`
  };

但我希望访问我的Redux状态的其他部分,当状态更新时标题更新.今天有可能吗？

我按照这个例子使用React Navigator创建了一个多屏幕应用程序:

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

const App = createStackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

export default App;

现在我想使用新的内置上下文api添加一个全局配置状态,因此我可以使用一些可以在多个屏幕上操作和显示的公共数据.

问题是上下文显然需要具有共同父组件的组件,以便上下文可以向下传递给子组件.

我如何使用不知道共享父母的屏幕来实现这一点,因为它们是由react navigator管理的？

我正在创建一个带有 react-native 的登录系统，下载后"react-native-gesture-handler" dependencies: "^ 1.1.0"并"react-navigation": "^ 3.5.1"开始出现以下消息错误：

null 不是对象（评估 'rngesturehandlermodule.direction'）

我试图删除项目并重新修改它，删除并重新安装 node_modules 文件夹并重新安装依赖项，但没有任何效果。

我刚刚安装了 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 …

我刚刚升级到 React Native 0.67.3，现在当我打开使用 React Navigation v6 的应用程序时，我收到此错误：

Occurred in worklet location: /Users/path/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
2022-03-09 10:54:14.180294-0500 project[1949:15686] [native] Tried to synchronously call anonymous function from a different thread.

Occurred in worklet location: /Users/path/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

我目前正在使用 DrawerNavigator，如下所示：

         <Drawer.Navigator initialRouteName="Home" >
            <Drawer.Screen name="HomeStack" component={HomeStack} />
          </Drawer.Navigator>

以下是我的相关软件包的版本：

    "react-native-reanimated": "2.3.1", …

我面临的问题TypeError : props.navigation.getParam不是函数。在(props.navigation.getParam('name'). 我正在使用reactNavigation version 5.x.此代码在reactNavigation 3. 我究竟做错了什么？

这是我的代码

export default class ChatScreen extends Component {
static navigationOption = ({ navigation }) => {
    return {
        title: navigation.getParam('name', null)
    }
}
 
constructor(props) {
    super(props);
   
  
    this.state = {
        person:{
           name:props.navigation.getParam('name'),
            phone:props.navigation.getParam('phone'),
            // name:'Raushan',
          //   phone:9931428888
        },
        textMessage: ''
    };
   
}

状态部分值错误。堆栈导航器

`

const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Auth">
        <Stack.Screen name="AuthLoading" component={AuthLoadingScreen} />
        <Stack.Screen name="App" component={HomeScreen} options={{ title: …

我在 React Native 应用程序中使用 react-navigation。

我不断收到一个错误，该错误应该是仅用于开发的警告，不会在生产中显示。

我如何修复下面的错误？

console.error: "The action 'NAVIGATE' with payload
{"name":"192.168.100.189:19000","params":{}} was not handled by any
navigator.

Do you have a screen named '192.168.100.189:19000'?

If you'r trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator.

This is a development-only warning and won't be shown in production."

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

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

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

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

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

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

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

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

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

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

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