在屏幕之间发送状态反应原生

2022-01-23 00:00:00 javascript react-native expo

我目前正在使用一个应用程序，该应用程序将为您提供来自幻想 api 的类/种族/背景故事.我在创建项目时使用了 expo 的标签模板.

Am currently working with an app that will provide you with a class/race/background story from an fantasy api. I used expo's tab template when i created the project.

所以我的问题是如何将我在比赛屏幕中获取的数据发送到我的背景故事屏幕以获取正确的背景故事?我一直在尝试用谷歌搜索它，但找不到有帮助的答案，我唯一发现的是它与导航器有关，因此我链接它.

So my question is how would I send data that i fetched in my Race screen to my background-story screen in order to fetch the correct background-story? I've been trying to googling it but couldnt find an answer that helped, the only thing i found is that its something to do with the navigator, hence why i link it.

Maintabnavigator.js

Maintabnavigator.js

    import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';
import { Icon } from 'expo';
import { Ionicons} from '@expo/vector-icons';
import HomeScreen from '../screens/HomeScreen';
import CharacterScreen from '../screens/CharacterScreen';
import BackgroundDetails from '../screens/CharacterScreens/BackgroundDetails';
import RaceDetails from '../screens/CharacterScreens/RaceDetails';
import ClassDetails from '../screens/CharacterScreens/ClassDetails';


const RaceStack = createStackNavigator({
  race: RaceDetails
});
const ClassStack = createStackNavigator({
  class: ClassDetails
});
const BackgroundStack = createStackNavigator({
  background: BackgroundDetails
});
const GeneratorStack = createStackNavigator({
  generator: CharacterScreen,
});


GeneratorStack.navigationOptions= {
  tabBarLabel: 'Generator',
  tabBarIcon: ({focused}) => (
    <Icon.Entypo
      focused={focused}
      name={'retweet'}
      size={26}
    />
  )
}
RaceStack.navigationOptions= {
  tabBarLabel: 'Race',
  tabBarIcon: ({focused}) => (
    <Icon.MaterialIcons
      focused={focused}
      name={'person'}
      size={26}
    />
  )
}
ClassStack.navigationOptions= {
  tabBarLabel: 'Class',
  tabBarIcon: ({focused}) => (
    <Icon.MaterialCommunityIcons
      focused={focused}
      name={'sword-cross'}
      size={26}
    />
  )
}
BackgroundStack.navigationOptions= {
  tabBarLabel: 'Background Story',
  tabBarIcon: ({focused}) => (
    <Icon.Feather
      focused={focused}
      name={'book'}
      size={26}
    />
  )
}
export default createBottomTabNavigator({
  GeneratorStack,
  ClassStack,
  RaceStack,
  BackgroundStack,
});

推荐答案

当您从一个屏幕导航到另一个屏幕时，如下所示:

When you navigate from one screen to another as follows:

this.props.navigation.navigate('ContactDisplay', { item });

您可以在另一个屏幕中访问项目"，如下所示:

You may access 'item' in the other screen as follows:

console.log(this.props.navigation.state.params.item);

相关文章