Question

访问导航参数 Expo-Go

2021-04-21

737

reactjs react-native expo react-navigation

我得到了“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>
  );
}

现在，返回结果为：

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

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

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

Answer 1

我创建了一个 Snack。请查看这个。

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

创建一个名为 navigation 的文件夹，您的 App.js 位于其中。

然后在此文件夹中创建一个名为 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 中看到 路由参数

Answer 2

导航对象可能不存在于屏幕上

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