Передача данных между братьями и сестрами |React Native

Question

У меня проблема в React Native, где я хочу разделить массив между двумя родственными компонентами.Мое приложение имеет нижний навигационный навигатор, и в нем я определил компоненты для навигации:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";
import { createBottomTabNavigator } from "react-navigation";
import MapScreen from './modules/Map';
import ProfileScreen from './modules/Profile';
import EventsScreen from './modules/Events';

export default createBottomTabNavigator(
  {
    Events: {
      screen: EventsScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="md-bookmark" color={tintColor} size={24} />
        )
      }
    },
    Map: {
      screen: MapScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="md-map" color={tintColor} size={24} />
        )
      }
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="md-person" color={tintColor} size={24} />
        )
      }
    }
  }
);

Компоненты, между которыми я хочу общаться, - это MapScreen и EventsScreen.У меня есть массив в MapScreen с маркерами, доступ к которым я хочу получить с экрана EventsScreen.Я рассмотрел Redux и MobX, однако из того, что я прочитал, вы передали бы массив обоим компонентам через родительский элемент, как показано ниже в MobX и Redux:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Sibling1 array={array}/>
        <Sibling2 array={array}/>
      </View>
    );
  }
}

Однако в моемНапример, компоненты не имеют общего родителя, кроме нижнего навигатора, но я не могу передать переменные компонентам через него.

Можно ли как-то получить доступ к одному и тому же массиву из обоих компонентов?

Answer 1

Состояние должно быть где-то "над" этими двумя компонентами.Это можно сделать либо через общего родителя, который поддерживает это конкретное состояние состояния и предоставляет это состояние дочерним элементам через реквизиты, либо вы можете использовать «глобальное» решение, такое как контекст React, Redux или любая другая библиотека управления состоянием.

Answer 2

, используя реагирующую навигацию, вы можете передать один и тот же объект на несколько экранов, передав свойство screenProps компоненту навигатора:

, например:

const Navigator = createBottomTabNavigator({});
...
<Navigator screenProps={{ array: arrayToPassToAllScreen }} />
Now you can access the 'array' prop in every screen by doing so : `this.props.screenProps.array`

ОБНОВЛЕНИЕ :

Вот что вам нужно в документе: https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props