Как получить доступ к параметрам, переданным компоненту на основе классов в реагирующей навигации 5.0?

Question

Используя реагирующую навигацию, вы можете передавать параметры следующим образом:

this.props.navigation.navigate(screen, {param: value});

, а в предыдущих версиях вы могли получить доступ к таким параметрам:

props.navigation.state.params

В новой версии реакции -navigation (5.0) они используют функциональные компоненты, и кажется, что вы не можете получить доступ к параметрам, как вы делали раньше. Вместо этого вы пишете компоненты и получаете доступ к параметрам следующим образом:

function 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('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

Как получить доступ к параметрам, передаваемым компоненту, без необходимости изменения всех компонентов в проекте с классовых на функциональные компоненты

Answer 1

Вам просто нужно изменить код, который вы использовали для доступа к параметрам, с

props.navigation.state.params

на

props.route.params

Все будет хорошо, не нужно менять классовые компоненты на функциональные компоненты .

Но я предлагаю вам начать миграцию по своему усмотрению, чтобы ваш код соответствовал последнему синтаксису.

Пример этого вы можете увидеть во фрагменте здесь, на этой закуске в Экспо. здесь, на этой выставке закуска