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

您可以为此使用redux，或者另一种方式是使用本地存储（react-native-local-storage），有了这个lib，您可以存储任何数据，并且可以随时访问页面。

反应导航如何将数据向下传递到导航对象

2 个答案: