Saltar al contenido principal

Передача параметров

Теперь, когда мы знаем, как создать навигатор стека с некоторыми маршрутами и перемещаться между этими маршрутами, давайте посмотрим, как мы можем передавать данные в маршруты при переходе к ним.

Для этого реализуйте два шага:

  • Передайте параметры в маршрут, поместив их в объект в качестве второго параметра функции navigation.navigate ('RouteName', {/ * сюда идут параметры * /})

  • Прочтите параметры в компоненте экрана: route.params

info

Рекомендуется, чтобы передаваемые вами параметры были сериализуемыми в формате JSON. Таким образом, вы сможете использовать сохранение состояния, а компоненты вашего экрана будут иметь правильный контракт для реализации глубинных ссылок.

App.js
import * as React from 'react'
import { View, Button, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => {
        /* 1. Navigate to the Details route with params */
        navigation.navigate('Details', {
          itemId: 86,
          otherParam: 'anything you want here'
        })
      }}
    />
  </View>
)

const DetailsScreen = ({ route }) => {
  /* 2. Get the param */
  const { itemId, otherParam } = route.params
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
    </View>
  )
}

const Stack = createStackNavigator()

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default App

Попробуйте этот пример на Snack

Начальные параметры​

Вы также можете передать на экран некоторые начальные параметры. Если вы не указали никаких параметров при переходе к этому экрану, будут использоваться начальные параметры. Они также неглубоко объединены с любыми параметрами, которые вы передаете. Начальные параметры можно указать с помощью свойства initialParams:

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

Передача параметров на предыдущий экран​

Параметры не только полезны для передачи некоторых данных на новый экран, но они также могут быть полезны для передачи данных на предыдущий экран. Например, предположим, что у вас есть экран с кнопкой создания публикации, а кнопка создания публикации открывает новый экран для создания публикации. После создания сообщения вы хотите передать данные для сообщения обратно на предыдущий экран.

Для этого вы можете использовать метод навигации navigate, который действует как goBack, если экран уже существует. Вы можете передать параметры с помощью навигации, чтобы передать данные обратно:

App.js
import * as React from 'react'
import { View, Button, TextInput, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen = ({ navigation, route }) => {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Create post" onPress={() => navigation.navigate('Details')} />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  )
}

const DetailsScreen = ({ navigation }) => {
  const [postText, setPostText] = React.useState('')

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: postText })
        }}
      />
    </>
  )
}

const Stack = createStackNavigator()

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default App
import * as React from 'react'
import { View, Button, TextInput, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen = ({ navigation, route }) => {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post])

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Create post" onPress={() => navigation.navigate('Details')} />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  )
}

const DetailsScreen = ({ navigation }) => {
  const [postText, setPostText] = React.useState('')

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: postText })
        }}
      />
    </>
  )
}

const Stack = createStackNavigator()

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default App

Попробуйте этот пример на Snack

Здесь, после того, как вы нажмете "Done", route.params главного экрана будет обновлен, чтобы отразить текст сообщения, который вы передали в навигации.

Передача параметров вложенным навигаторам​

Если у вас есть вложенные навигаторы, вам нужно передать параметры немного иначе. Например, предположим, что у вас есть навигатор внутри экрана учетной записи Account, и вы хотите передать параметры на экран настроек Settings внутри этого навигатора. Вы можете передать параметры так:

navigation.navigate('Account', {
  screen: 'Settings',
  params: { user: 'jane' }
})

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!