Как организовать переход между экранными формами с передачей значения ReactNative, expo

Question

Пытаюсь сделать переход из одной экранной формы (/(tabs)/structure) в другую (/structures/system) с передачей значения id объекта. В стеке приложения объявлены папки (tabs) и strustures.

(tabs)/_layout.tsx

import React from 'react';
import { Tabs } from 'expo-router';

export default function TabLayout() {

  return (
    <Tabs>
      <Tabs.Screen
        name="structure"
      />

    </Tabs>
  )
}

structures/_layout.tsx

import React from 'react';
import { Stack } from 'expo-router';

export default function TabLayout() {
  return (

    <Stack>
      <Stack.Screen
        name="system"
        initialParams={{ idSystem: 1 }}
        }}
      />
    </Stack>
  )
}

Переход прекрасно работает c помощью router.push('/structures/system'), но как поняла, он не позволяет передавать необходимое значение, поэтому попробовала организовать с помощью navigation.navigate('structures', {screen: 'system'}, {idSystem: item.id}) - Переход выполняется, но появляются следующие ошибки:

(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'params' of undefined

structure/system.tsx

import { ScrollView } from 'react-native';
import { router, useNavigation } from 'expo-router';

export default function TabOneScreen({route}: any) {
  const navigation = useNavigation();
  const {idSystem} = route.params;
  console.log(idSystem);

  return (
    <ScrollView >
    //smth
    </ScrollView>
  );
}

Если вместо TabOneScreen({route}: any) написать TabOneScreen(idSystem: any), выдает следующее в качестве вывода в консоль значения idSystem:

{"segment": "system"}

Подскажите, где косяк, как правильно организовать переход с передачей значения?

Answer 1

Нашла подробный пример https://expo.github.io/router/docs/migration/react-navigation/params/

structure.tsx

export default const Struct = () => {
const router = useRouter();// from 'expo-router'
 return(
    <TouchableOpacity onPress={() =>{router.push({pathname: '/structures/system', params: { post: item.id}})}} style={{width: '99%'}}>
       //smth
    </TouchableOpacity>
);
}

system.tsx

export default function TabOneScreen() {
  const {post} = useLocalSearchParams();
  console.log(post);

  useEffect(() => {
    if (post) {
      // Post updated, do something with `post`
      // For example, send the post to the server
    }
  }, [post]);

return (
//smth
);
}

БЛОГ НА HUSL

Как организовать переход между экранными формами с передачей значения ReactNative, expo

Ответы (1 шт):