Как назначить значение по умолчанию в параметре маршрута в реагировать родной - PullRequest
Новая
       65

Как назначить значение по умолчанию в параметре маршрута в реагировать родной

0 голосов
/ 17 апреля 2020

Я хочу установить значение по умолчанию в параметре маршрута, если с другого экрана ранее ничего не отправлялось ранее, как мы это делали, например 

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

что делать в реакции Navigation 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,
  },
});

также показывает некоторую ошибку: undefined не является объектом (оценивает 'route.params.photo') .. мне всегда нужно объявлять param на экране отправки

1 Ответ

2 голосов
/ 18 апреля 2020

Вы можете передать некоторые начальные параметры на экран в реакции-навигации версии 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>
  );
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...