React-навигация, как передавать данные в объекты навигатора

Question

Рассмотрим следующий пример:

import { AppRegistry } from "react-native";
import React, { Component } from "react";

import {
    createSwitchNavigator,
    createStackNavigator,
    createBottomTabNavigator
} from "react-navigation";

import Icon from "react-native-vector-icons/Ionicons";

import { withNavigation } from "react-navigation";

import {
    View,
    Text,
    Platform,
    TouchableNativeFeedback,
    TouchableOpacity,
    StyleSheet
} from "react-native";

const Touchable =
    Platform.OS === "android" ? TouchableNativeFeedback : TouchableOpacity;


class ListComponent extends Component {
    static navigationOptions = {
        title: "List"
    };

    handleGo = () => {
        this.props.navigation.navigate("Board");
    };

    render = () => {

            //??? How to get myData ???

        return (
            <View>
                <Text>HELLO LIST!!!!</Text>
                <Touchable onPress={this.handleGo}>
                    <Text>GO TO BOARD</Text>
                </Touchable>
                <Text>{myData}</Text>
            </View>
        );
    };
}

const List = withNavigation(ListComponent);

class BoardComponent extends Component {
    static navigationOptions = {
        title: "Board"
    };

    //??? How to get myData ???

    render = () => {
        return (
            <View>
                <Text>HELLO BOARD!!!!</Text>
                <Text>{myData}</Text>
            </View>
        );
    };
}

const Board = BoardComponent;

class PanelComponent extends Component {
    static navigationOptions = {
        title: "Panel"
    };

    //??? How to get myData ???

    render = () => {
        return (
            <View>
                <Text>HELLO PANEL!!!!</Text>
                <Text>{myData}</Text>
            </View>
        );
    };
}

const Panel = PanelComponent;

const Test0 = createStackNavigator(
    {
        List: {
            screen: List
        },
        Board: {
            screen: Board
        }
    },
    {
        navigationOptions: {
            headerStyle: {
                backgroundColor: "grey"
            },
            headerTintColor: "blue",
            headerTitleStyle: {
                fontWeight: "bold"
            }
        }
    }
);

const Test1 = createStackNavigator(
    {
        Panel: {
            screen: Panel
        }
    },
    {
        navigationOptions: {
            headerStyle: {
                backgroundColor: "grey"
            },
            headerTintColor: "blue",
            headerTitleStyle: {
                fontWeight: "bold"
            }
        }
    }
);

const LoggedInNavigator = createBottomTabNavigator(
    {
        Test0: {
            screen: Test0,
            navigationOptions: {
                tabBarIcon: ({ tintColor, focused }) => (
                    <Icon
                        name={"ios-list-box-outline"}
                        size={24}
                        color={"#cdcdcd"}
                    />
                )
            }
        },
        Test1: {
            screen: Test1,
            navigationOptions: {
                tabBarIcon: ({ tintColor, focused }) => (
                    <Icon
                        name={"ios-construct-outline"}
                        size={24}
                        color={"#cdcdcd"}
                    />
                )
            }
        }
    },
    {
        tabBarOptions: {
            showLabel: false,
            activeTintColor: "white",
            activeBackgroundColor: "blue",
            style: {
                backgroundColor: "grey"
            }
        },
        animationEnabled: true,
        swipeEnabled: true,
        initialRouteName: "Test1"
    }
);

export const createRootNavigator = () => {

    let myData = getMyDataFromDB(); // <=== How can I pass myData down to Panel/Board/List

    return createSwitchNavigator(
        {
            LoggedIn: {
                screen: LoggedInNavigator
            }
        },
        {
            initialRouteName: "LoggedIn"
        }
    );
};

class App extends Component {
    render = () => {
        const Layout = createRootNavigator();

        return <Layout />;
    };
}

export default App;

AppRegistry.registerComponent("app", () => App);

Как я могу передать myData через все маршруты к конечным компонентам?

Это скелет гораздо большего приложения, в котором я запрашиваю данные в корневом навигаторе (createRootNavigator), которые должны быть переданы некоторым компонентам вниз по дереву навигации.

Answer 1

Вы можете создать компонент высшего порядка или компонент-обертку, который будет обрабатывать выборку ваших данных в componentDidMount и обернуть все ваши маршруты им

// HOC component example
import React from 'react';

const withMyData = (WrappedComponent) => {
  class myEnchancedComponent extends React.Component {
      state ={ myData: null }

      componentDidMount() {
          let myData = getMyDataFromDB();
          // set the state after you get the data
          this.setState({myData})
      }

    render() {
        const {myData} = this.state;
        return (
            <WrappedComponent {...this.props} myData={myData}
            />
        );
    }
  }

  return myEnchancedComponent;
};

export default withMyData;

// example of how to use it
const List = withMyData(withNavigation(ListComponent));

Есть и другие способы решения этой проблемы. Вы можете использовать redux в сочетании с redux-persist для хранения ваших данных и обеспечения их доступности даже в автономном режиме.

Answer 2

Он может использовать для этого избыточность, или другим способом является использование локального хранилища (act-native-local-storage), с помощью этой библиотеки вы можете хранить любые данные и в любой момент времени или на странице вы можете получить к ним доступ.