javascript - react-native 如何在路由参数中分配默认值

Question

如果之前我们以前做的其他屏幕没有发送任何内容，我想在路由参数中设置一个默认值

let phot0 = this.props.navigation.getParam("photo","empty");

在反应导航 5.x 中要做什么我的代码是..（第 5 行的困难）

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

export default function Home({ route, navigation }) {
  const { photo } = route.params;
  return (
    <View style={styles.container}>
      <Image
        resizeMode="center"
        style={styles.imageHolder}
        source={photo === "empty" ? require("../assets/email.png") : photo}
      />
      <Button
        title="take photo"
        style={styles.button}
        onPress={() => navigation.navigate("Camera")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  imageHolder: {
    alignSelf: "center",
  },
  button: {
    margin: 20,
  },
});

它还显示一些错误：未定义不是对象（评估'route.params.photo'）..我是否总是需要在发送屏幕中声明参数？

标签： javascriptreact-nativenavigationreact-native-navigation

Answer 1

您可以将一些初始参数传递到react-navigation 版本 5中的屏幕，如下所示，

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 100 }}
/>

例如，如果您在导航到屏幕时未指定任何参数Details，则将使用初始参数。

有关更多信息，请查看下面的完整示例

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate("Details");
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>itemId: {route.params.itemId}</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          /**
           * when you didn't specify itemId params the initial params will be used
           */
          initialParams={{ itemId: 100 }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

希望这对您有所帮助。随意怀疑。