在一个抽屉导航器中的堆栈导航器之间传递数据

Question

是否可以在一个抽屉导航器中在两个堆栈导航器之间传递数据？即：

-DrawerNavigationA --StackNavigationA --StackNavigationB

我想将一些数据（您可以在下面的代码中看到）从 StackNavigationB 传递到 StackNavigationA。我需要做什么？我正在寻找一些解决方案的第 3 天，但我一无所获。

App.js

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

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

Home.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;

router.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"

如您所见，当点击 Touchable 并导航到主页时，我想将名称从 ChooseName 传递给 Home。

感谢您的回复。

Answer 1

你可以将它作为道具传递，例如：navigation.navigate("Home",{'id':2222})，你可以在下一条路线中获得它。希望对你有帮助

您将代码中 ChooseName.js navigation.navigate('HomeStack'); 中的这一行更改为 navigation.navigate('HomeStack',{name:name})；

然后在你的Home.js中把这个export default function Home({ navigation })改成export default function Home({ navigation, route })，再加一个console.log(route)和console.log(navigation)就明白了，就是全部的情况

在一个抽屉导航器中的堆栈导航器之间传递数据

Passing data between Stack navigators in one Drawer navigator

javascript

react-native

react-navigation

react-navigation-drawer

react-navigation-stack