标签: react-navigation

我正在将 TypeScript 添加到我的 React Native/React Navigation 5 Navigator 中，但在添加EventStackParams到createStackNavigator().

我浏览了React Native 5 Docs、StackOverflow 和 GitHub，但没有成功。我究竟做错了什么？下面是我的错误和代码

错误：

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.

Index signature is missing in type 'EventStackParams'.ts(2344)

导航.tsx：

// Imports: TypeScript Types
import { EventStackParams } from '../types/types';

// React Navigation: Stack Navigators
const RootStack = createStackNavigator();
const EventsStack = createStackNavigator<EventStackParams>();

// Events Navigator
const EventsNavigator = () => (
  <EventsStack.Navigator initialRouteName="Events">
    <EventsStack.Screen
      name="Events"
      component={Events}
      options={{
        title: …

我正在尝试使用 React Navigation 的route.params 将变量从一个屏幕传递到另一个屏幕。

我已经在它前面的屏幕上正常工作了，但在下一个屏幕上却失败了，我不明白为什么。

这是代码：

      setTimeout(() => {
        console.log('here is the hid: ' + results.data.hid);
        navigation.navigate('MainHome', {
          hid: results.data.hid,
        });
      }, 2500);

控制台日志在控制台中正确显示正确的数据。此代码将导致下一个屏幕：

function Home({route, navigation}) {
  const hid = route.params;
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');
  const [loading, setLoading] = useState('loading');

  console.log('Here is the hid that is retrieved from the route params on home:' + hid);

此控制台日志显示 hid 为未定义。

以下是引用屏幕的扩展代码：

function IntroOne({route, navigation}) {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = …

我创建了一个空白项目whit expo init，然后我安装了react-navigation npm install @react-navigation/native，但是expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view当我运行该应用程序时，expo start我收到此错误：无法从C:\Android\test\App.js解析模块@react-navigation/stack：在项目中找不到@react-navigation/stack。

错误截图：

应用程序.js 文件：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} /> …

在我的 React Native (Expo) 应用程序中，我想将React Navigation从 V5 升级到 V6。但是，我无法TextInput在堆栈导航器标题中设置全角。我尝试了'auto'样式'100%'的价值width，但是都没有帮助真正的宽文本框。

以下是世博小吃的复制链接：https://snack.expo.io/@vahdet/reactnavigation6-headerbar，App.js其内容如下。我想我缺乏一些弹性盒知识headerSearchBarStyle：

import React, { useLayoutEffect, useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { enableScreens } from 'react-native-screens';
import { AppearanceProvider } from 'react-native-appearance';
import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '@react-navigation/stack';

enableScreens();
const HomeStack = …

此问题的用例是让抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”上可能有许多按钮链接到堆栈导航的其他屏幕，其中抽屉不可用。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用抽屉导航？在下面的示例中，抽屉在堆栈的所有页面上都可用。我尝试过gestureEnabled但没有成功：

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

另一方面，如果我尝试将其作为屏幕Drawer之一Stack，那么我总是有相同的标题栏（例如“标题”）

我正在尝试更改 React Native 中底部选项卡导航栏的高度。我已经尝试了这个Stack Overflow 问题的一些答案，但似乎没有任何效果。请帮忙。

我的代码：

export default function AppTabs({ logged }) {
  const Tabs = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tabs.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              const current_color = focused ? COLORS.white : COLORS.lightGrey;

              if (route.name === "Home") {
                return <Foundation name="home" size={28} color={current_color}/>
              } else if (route.name === "Search") {
                return <Ionicons name="search" size={28} color={current_color} />
              } else if (route.name === "Library") { …

我花了最后一天的时间试图找出如何使用反应导航实现简单的淡入淡出屏幕转换，但我找不到一种方法让它与底部选项卡导航器一起使用。有人可以帮我吗？我已经广泛阅读了文档，但动画似乎只能通过堆栈导航器使用。

你能在这个小吃演示中进行过渡吗？

https://snack.expo.io/?platform=android&name=Native%20Stack%20Navigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view %40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact-native -safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.0.4%2C%40react -navigation%2Fdrawer%406.1.3%2C%40react-navigation%2Felements%401.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%406.0.4%2C%40react-navigation%2Fmaterial-top-tabs%406.0 .2%2C%40react-navigation%2Fnative-stack%406.0.5%2C%40react-navigation%2Fnative%406.0.2%2C%40react-navigation%2Fstack%406.0.6&hideQueryParams=true&sourceUrl=https%3A%2F%2Freactnavigation .org%2Fexamples%2F6.x%2Ftab-based-navigation-minimal.js

我下面的选项卡代码是底部选项卡导航器代码，我想通过渲染它在每个屏幕上显示它，就像app.js我对抽屉导航器所做的那样（简单地说，我想在屏幕上调用底部选项卡导航器）

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
let user1=""
let data=""
export function DrwaerNav(props) {


  
  if(props.route.params!=undefined){

    console.log('props arent undefined')


    
   
 user1=props.route.params.user.auth
 data=props.route.params.user.auth


  }


  return (

      <Drawer.Navigator initialRouteName="homeS"  drawerContent={(props) => <DrawerContent props={props} data={user1}/>}
      
      screenOptions={{
        headerStyle:{
          backgroundColor:'transparent',
          },
        headerTintColor:'black',
        headerTitleStyle:{
          fontWeight:'bold',
        }
      }}
      >
 
        <Drawer.Screen name="complaints" component={complaints} 
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>

        <Drawer.Screen name="homeS" component={homeS} options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           {/* <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",fontSize:12,}}>{user1.email}</Text> */} …

我刚刚从 React 导航 5 升级到 6，并查看了透明模式的文档。不幸的是，我无法在模式下显示上一个屏幕。相反，我得到的是灰色背景。

我用我的代码做了一份小吃来展示我的结果：https ://snack.expo.dev/@divone/transparent-modal-not-working

我究竟做错了什么？我似乎已经拥有文档中列出的所有元素，使其可以正常工作。

我正在使用 expo SDK 43 的托管工作流程。

我目前正在使用 Expo 和 React Navigation 在我的应用程序的深色主题和浅色主题之间切换。唯一的问题是 I\xe2\x80\x99m 无法根据主题更改 iOS 上的状态栏颜色。

我在抽屉导航器中嵌套了一个选项卡导航器，但是当我切换嵌套导航中所有屏幕的主题时，我\xe2\x80\x99m 无法弄清楚如何更改 iOS 上的状态栏颜色。这就是我的抽屉导航器的一部分的样子。

 <themeContext.Provider value={themeData}>\n    <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>\n      <Drawer.Navigator\n        screenOptions={{\n          headerShown: false,\n          swipeEdgeWidth: 0,\n          drawerActiveBackgroundColor: '#e8e4f0',\n          drawerActiveTintColor: '#8a76b6',\n          drawerInactiveBackgroundColor: 'transparent',\n          drawerInactiveTintColor: '#bcbcc1',\n\n        }}\n