通过 CreateAppContainer 传递 props

Posted 2023-02-16

【中文标题】通过 CreateAppContainer 传递 props

【英文标题】：Pass props through CreateAppContainer

【发布时间】：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);

【参考方案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 也是未定义的。

您能否根据我的回答用您在代码中所做的更改来更新您的问题？这将有助于了解问题的根源。