通过 CreateAppContainer 传递 props答案

【问题标题】：Pass props through CreateAppContainer通过 CreateAppContainer 传递 props
【发布时间】：2019-07-26 21:29:31
【问题描述】：

我正在尝试通过 AppContainer 传递道具。我可以通过其他组件传入，但我不知道如何通过 createAppContainer 发送道具

在 App.js 中：

render() {
    return (
        this.state.isLoggedIn ? <DrawerNavigator /> : 
<SignedOutNavigator handler={this.saveUserSettings} />
    )
}

在 SignedOutNavigator 中：

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";

const SignedOutNavigator = createStackNavigator({
    Login: {
        // screen: LoginScreen
        screen: props => <LoginScreen screenProps={value => {
            // I need to access props from here
            // like this.props.handler(value)
        }} />,
        navigationOptions: ({ navigation }) => ({
            header: null,
        }),
    }
});

export default createAppContainer(SignedOutNavigator);

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

好的，我在 Samuel Vaillant 的帮助下完成了这项工作。我不得不进行一些修改。

我的 App.js：

render() {
        return (
            this.state.isLoggedIn ? <DrawerNavigator /> : <SignedOutNavigator
                screenProps={{
                    handler: (settings) => { this.saveUserSettings(settings) }
                }}
            />
        )
    }

我的 SignedOutNavigator：

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";

const SignedOutNavigator = createStackNavigator({
    Login: {
        // screen: LoginScreen
        screen: screenProps => <LoginScreen screenProps={value => {
            screenProps.screenProps.handler(value)
        }} />,
        navigationOptions: ({ navigation }) => ({
            header: null,
        }),
    }
});

export default createAppContainer(SignedOutNavigator);

【讨论】：

【解决方案2】：

您必须限定 screenProps 下的 props 才能在 screen 级别访问它。

// App.js
<AppNavigator
  screenProps={{
    handler: () => {},
    hello: "World"
  }}
/>

// Navigator.js
const StackNavigator = createStackNavigator({
  Login: {
    screen: ({ screenProps, navigation }) => {
      screenProps.handler();

      // ...
    },
  },
})

【讨论】：

我如你所说更改了 App.js 但它似乎不起作用： this.state.isLoggedIn ？ : { this.saveUserSettings(settings) } }} /> 和导航器中的 console.log(this.screenProps) 返回 undefined
您不必使用this 来访问屏幕级别的道具。这些道具作为screen 函数（它是一个组件）的参数提供。您也可以直接提供LoginScreen 组件到屏幕screen: LoginScreen。然后在LoginScreen 中，您可以访问this.props.screenProps。
我有这个结构：App.js > SignedOutNavigator > LoginScreen > LoginForm。所以我向后工作，我能够从 Form 到 SignedOutNavigator。我现在只有console.log。但是我不明白如何将道具从 App.js 传递给 SignedOutNavigator，所以我将进一步传递它们。 SignedOutNavigator 是我的问题。即使我从 App.js 发送道具，正如您向我展示的那样，SignedOutNavigator 中的 console.log(screenProps) （或 this.screenProps 或 this.props 也是未定义的。
您能否根据我的回答用您在代码中所做的更改来更新您的问题？这将有助于了解问题的根源。