访问导航参数 Expo-Go

Question

我有“Screen1”，我在其中创建了一个字符串“blabla”。根据文档，我可以将其设置为导航参数：

export default function Screen1() {
  const navigation = useNavigation();
  navigation.navigate("Screen2", { item: "blalbla" });
  return (
    <View>
      <Text>Render some stuff</Text>
    </View>
  );
}

在 Screen2 上，我应该可以通过以下方式访问它：

export default function Screen2({ route, navigation }) {
  const { item } = route.params;
  console.log(item);
  return (
    <View>
      <Text>Render some stuff</Text>
    </View>
  );
}

现在，这个 returns:

TypeError: undefined is not an object (evaluating 'route.params.item')]

我也尝试了其他一些例子，但没有成功。

参考 React-Native 文档：https://reactnavigation.org/docs/params/

Answer 1

我创建了一个小吃。检查 this。

按照以下步骤解决您的问题

在您的 App.js 所在的位置创建一个名为 navigation 的文件夹。

然后在此文件夹中创建一个名为 AppNavigator.js

的文件

里面AppNavigator.js粘贴这个

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

import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
  );
}

export default AppNavigator;

现在创建另一个名为 screens 的文件夹，您的 App.js 所在的位置

在此文件夹中创建两个文件 Screen1.js 和 Screen2.js

它们应该是这样的

Screen1.js -

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

function Screen1({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Screen 1</Text>
      <Text onPress={() => navigation.navigate('Screen2', { item: 'blalbla' })}>
        Press ME
      </Text>
    </View>
  );
}

export default Screen1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Screen2.js -

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

function Screen2({ route, navigation }) {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <Text>Screen 2</Text>
      <Text onPress={() => navigation.navigate('Screen1')}>{item}</Text>
      <Text onPress={() => navigation.navigate('Screen1')}>Press ME</Text>
    </View>
  );
}

export default Screen2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

现在您应该在 Screen2

中看到 route parameters

Answer 2

屏幕中可能不存在导航对象

将 Screen1({ navigation }) 更改为 Screen1(props) 并执行 console.log(props) 以检查您是否在那里看到 navigation 对象

访问导航参数 Expo-Go

Accessing navigation parameters Expo-Go

reactjs

react-native

react-navigation

expo