在兄弟姐妹之间传递数据 |反应本机

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-navigation，您可以通过将 screenProps 属性传递给您的 Navigator 组件，将相同的道具传递给多个屏幕：

例如：

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

Answer 2

您必须将状态放置在这两个组件的某处"above"。这可以通过 common parent 来完成，它持有特定的和平状态并通过 props 将此状态提供给 children，或者您可以使用 "global" 解决方案，如 React 上下文、Redux 或任何其他状态管理库。

在兄弟姐妹之间传递数据 |反应本机

Passing data between siblings | React Native

siblings

reactjs

react-native

redux

mobx