Передача данных между навигаторами стека в одном навигаторе ящика

Question

Можно ли передавать данные между двумя навигаторами стека в одном навигаторе ящика? т.е.:

-DrawerNavigationA --StackNavigationA --StackNavigationB

Я хочу передать некоторые данные (вы можете увидеть в коде ниже) из StackNavigationB в StackNavigationA. Что мне нужно сделать? На третий день я ищу какое-то решение, но ничего не нашел.

Приложение. js

import React from 'react';
import Navigator from './routes/drawer';

export default function App() {
  return (
    <Navigator />
  );
}

Дом. js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default function Home({ navigation }) {
  return (
    <View style={styles.container}>
      <Text> Hello {/* here i want to show a passed value from ChooseName */} from home! </Text>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

ChooseName. js

import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, FlatList } from 'react-native';

export default function ChooseName({ navigation }) {
  const [names, setNames] = useState([
    { name: 'Adam', key: '1' },
    { name: 'Ivan', key: '2' },
    { name: 'Josh', key: '3' },
  ]);

  //after clicking on the name
  const onPressHandler = (name) => {
    // //Do something to pass name to Home screen
    // //and navigate to Home screen
    navigation.navigate('HomeStack');
    console.log('hello' + name);
  }

  return (
    <View style={styles.container}>
      <FlatList data={names} renderItem={({ item }) => (
        <TouchableOpacity onPress={() => onPressHandler(item.name)}>
          <Text style={styles.name}>{ item.name }</Text>
        </TouchableOpacity>
      )} />
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    name: {
        padding: 10,
        marginBottom: 10,
    }
});

HomeStack. js

import { createStackNavigator } from 'react-navigation-stack';
import Home from '../screens/Home';

const screens = {
  Home: {
    screen: Home,
    navigationOptions: {
        title: 'Home',
    },
  },
};

const HomeStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: '#444',
    headerStyle: { backgroundColor: '#eee', height: 60 }
  }
});

export default HomeStack;

ChooseNameStack. js

import { createStackNavigator } from 'react-navigation-stack';
import ChooseName from '../screens/ChooseName';

const screens = {
    ChooseName: {
        screen: ChooseName,
        navigationOptions: {
            title: 'ChooseName'
        },
    },
}

const AboutStack = createStackNavigator(screens, {
  defaultNavigationOptions: {
    headerTintColor: '#444',
    headerStyle: { backgroundColor: '#eee', height: 60 },
  }
});

export default AboutStack;

роутер. js

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

// stacks
import HomeStack from './HomeStack';
import ChooseNameStack from './ChooseNameStack';

// drawer navigation options
const RootDrawerNavigator = createDrawerNavigator({
    HomeStack: {
        screen: HomeStack,
    },
    ChooseNameStack: {
        screen: ChooseNameStack,
    },
});

export default createAppContainer(RootDrawerNavigator);

версии навигации

"react-navigation": "^4.3.9",
"react-navigation-drawer": "^2.4.13",
"react-navigation-stack": "^2.4.0"

Как видите, я хочу передать имя из ChooseName в Home при нажатии Touchable, а затем перейти на домашнюю страницу.

Спасибо за ответы.

Answer 1

вы можете передать его как реквизит, например: navigation.navigate("Home",{'id':2222}), и вы сможете получить его на следующем маршруте. Надеюсь, это поможет

, вы измените эту строку в ChooseName. js navigation.navigate('HomeStack'); в своем коде на navigation.navigate('HomeStack',{name:name});

затем в вашем доме. js измените это export default function Home({ navigation }) на export default function Home({ navigation, route }) и добавьте console.log(route) и console.log(navigation), чтобы понять ситуацию, в которой все