标签: react-navigation

我们正在将 React Navigation 4 中的应用程序迁移到 React Navigation 5。该项目有一个 BottomTabNavigator，它的其中一个路由有一个嵌套的 TopTabNavigator 和三个选项卡。按下时BottomTabNavigator 中的一个选项卡导航到排序屏幕，您可以在其中选择排序参数进行排序，然后导航到添加所选排序参数的“待定”路由，该路径应到达TopTabNavigator 内的三个列表屏幕之一. 目前我在这些屏幕中收到 route.params 为 null，我认为这是因为中间有另一个导航器（topTabNavigator）。

底部标签导航器

    <BottomTabsNavigator.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      initialRouteName="Pending"
    >
      <BottomTabsNavigator.Screen name="Pending" component={createTopTabsNavigator} />
      <BottomTabsNavigator.Screen name="Sort" component={SortScreen} />
      <BottomTabsNavigator.Screen name="Tab 3" component={Fragment} />
      <BottomTabsNavigator.Screen name="Tab 4" component={Fragment} /> 
      <BottomTabsNavigator.Screen name="Tab 5" component={Fragment} />
      <BottomTabsNavigator.Screen name="Filter" component={Fragment} />
    </BottomTabsNavigator.Navigator>

SortScreen 选项卡：

    handleOnPress(item: { text: string; value: string; }): void {
        const {navigation} = this.props;

        const param = {orderBy: item.value};
        navigation.navigate('Pending', param);
    }

    render(){
        return(
            <View> …

My app has 5 components (screens), I am using stack navigation version 5, I need the headers for all screens except one screen, I tried to do this via option inside screens like this:

This is my code:

const Stack = createStackNavigator();
const MainStack = () => ({
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="MyTabs" component={MyTabs} />
                <Stack.Screen name="Direct" component={Direct} />
                <Stack.Screen name="Like" component={Like} />
                <Stack.Screen name="Search" component={Search} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </NavigationContainer>
    )
)}

我正在使用本指南创建自定义抽屉内容：

const DrawerContent = (props) => (
  <DrawerContentScrollView {...props}>
    <AntDesign
      name="close"
      size={32}
      onPress={() => props.navigation.closeDrawer()}
    />
    <Text>TEST</Text>
    <DrawerItemList {...props} />
  </DrawerContentScrollView>
);

它运行良好，但我想对props参数进行类型检查。所以我试过：

import { DrawerContentComponentProps } from '@react-navigation/drawer';

const DrawerContent = (props: DrawerContentComponentProps) => (
  // Same stuff
);

但是我的 IDE 现在告诉我它props.navigation.closeDrawer不存在，但它确实存在。

定义函数props类型的正确方法是什么DrawerContent？

我有一个简单的疑问，希望有人能帮助我。我有一个简单的应用程序，它有一个主屏幕，其中加载我从 SQLite 数据库获得的所有数据，但是，当我转到“添加到数据库屏幕”并在数据库中添加一些数据和记录时，我使用了一个函数返回上一屏幕 ( props.navigation.goBack())。

不幸的是，当我到达屏幕 A 时，我的钩子不会“刷新”或更新数据库中的数据。有没有办法让它刷新屏幕A以重新调用数据库并使用新数据刷新数据？

ps：为了调用数据库，我使用今天的日期来获取查询中的数据，所以我的日期不会更新。

这是我的代码：

ScreenA.js

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenA() {

   const [data, setData] = useState([]);

    useEffect(() => {
        setData(getDataFromApi())
    }, []);

    return(
        <View>
            { apiResponse() }
            <TouchableOpacity onPress={() => { props.navigation.navigate('ScreenB') }}
                <Text>Add data</Text>
            </TouchableOpacity>
        </View>
    )
}

这是 ScreenB.js

import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default …

我使用的版本2.x的react-navigation，现在我迁移到版本5.x。我已根据文档安装了所有模块，但在运行应用程序时，出现此错误。

这似乎更像是打字稿编译错误，但我不确定它为什么会出现，因为我只是运行npm install命令并且没有触及任何node_module文件。

error: SyntaxError: E:\PROJECTS\rnzone\BoxApp\node_modules\@react-navigation\stack\src\index.tsx: Unexpected token (51:12)

  49 |  * Types
  50 |  */
> 51 | export type {
     |             ^
  52 |   StackNavigationOptions,
  53 |   StackNavigationProp,
  54 |   StackHeaderProps,

你有什么建议？

如何将自定义注销按钮添加到我的抽屉？我尝试了几件事，但似乎找不到解决方案。这就是我被困的地方。

import React from 'react';
import {TouchableOpacity, Image, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

const HomeStack = createStackNavigator();
const Drawer = createDrawerNavigator();

// Screens
import HomeScreen from '../containers/HomeContainer';

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="My Thoughts"
        component={HomeScreen}

      />
    </HomeStack.Navigator>
  );
};

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackSceen} />
      <TouchableOpacity>
       <Text>Logout</Text>
      </TouchableOpacity>
    </Drawer.Navigator>
  );
}

export const AppNavigation = () => {
  return (
    <NavigationContainer> …

我正在尝试使用 react native 开发一个 todolist 应用程序，为此我对主屏幕进行了编码。我遵循了一些文档，但它给了我这个错误。请帮忙。我已按以下顺序执行了命令。

 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 npm install @react-navigation/native

 npm install @react-navigation/stack

这是我的代码。

import React from 'react';
import { StyleSheet, Text, View ,Button} from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';

class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state={}
  }
  render(){
    return(
      <View>
      <View style={{margin:50}}>
        <Button title="New Task"></Button>
      </View>
    </View>
    )
  }
}

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

从this和this中，我了解到navigation.navigate()和之间存在有意义的差异navigation.push()。尽管如此，我仍然想知道我是否可以使用navigation.navigate()ornavigation.push()代替navigation.goBack()or navigation.popToTop()。

就我而言，只有一页，导航中包含一些参数。（即，通过navigation.navigate(param, {...})或navigation.push(param, {...})。一旦我移动到另一个页面，变量发生了一些变化，现在我想将带有新数据的参数发送回第一页。我考虑这样做navigation.navigate(param, {...})或navigation.push(param, {...})再次，因为它看起来我无法发回任何参数使用goBack()或popToTop()，根据this

我检查了这个，但我不是 100% 确定，因为我认为如果用户多次执行上述操作，页面可能会堆积很多。

I am currently building a react native app and am using a stack navigator to navigate between the screens in my app. In my App.js, I am currently storing the screens in this format:

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="screen1">
          <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
          <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

After the user is in screen 1, I want to be able to navigate to screen 2 on the press of a …

我的HomeHeader组件是这样的：

import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";

export default function HomeHeader({ navigation }) {
  return (
    <View style={styles.home_header}>
      <Icon
        style={styles.menu}
        name="bars"
        size={30}
        color="white"
        onPress={navigation.toggleDrawer()}
      />

      <Image
        style={styles.header_logo}
        source={require("../assets/logo.png")}
      />
      <Text>Hello</Text>
    </View>
  );
}

并在我的主屏幕中使用它，如下所示：

return (
  <View>
    <HomeHeader navigation={navigation} />
  </View>
)

但我收到此错误消息：

警告：无法从不同组件的函数体内部更新组件。

我想要做的是，我已将 HOME 屏幕的标题部分分离到一个名为 HomeHeader 的单独组件中。在这个组件中，我附加了事件处理程序来切换 DrawerNavigation（左侧抽屉菜单）的打开/关闭

如果我在主屏幕中创建一个 Button 并添加事件处理程序来切换抽屉，它工作正常。但是只有当我从我的 HomeHeader 组件内部尝试这个问题时才会发生。

顺便说一句，我正在使用 ReactNavigation v5，我什至尝试过这种方法：https ://reactnavigation.org/docs/connecting-navigation-prop/

到目前为止没有运气。