时间戳

首页 > 解决方案 > 在一个抽屉导航器中的堆栈导航器之间传递数据

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

问题描述

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

-DrawerNavigationA --StackNavigationA --StackNavigationB

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

应用程序.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'
    }
});

选择名称.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;

选择NameStack.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"

如您所见，我想在单击 Touchable 时将名称从 ChooseName 传递给 Home，然后导航到主页。

感谢您的回复。

标签： javascriptreact-nativereact-navigationreact-navigation-stackreact-navigation-drawer

解决方案

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

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

然后在您的 Home.js 中将其更改export default function Home({ navigation })为export default function Home({ navigation, route })并添加一个console.log(route)andconsole.log(navigation)以了解所有情况

推荐阅读