React-Native 将标题从 Navigator 传递到 NavigatorIOS

Posted 2023-02-22

【中文标题】React-Native 将标题从 Navigator 传递到 NavigatorIOS

【英文标题】：React-Native pass title from Navigator to NavigatorIOS

【发布时间】：2015-12-30 15:11:27

【问题描述】：

我一直在寻找这个问题的解决方案已经有一段时间了，但找不到任何可以解决它的方法。

这是我想要完成的事情。 我正在创建一个带有登录屏幕的应用程序。登录屏幕不能有导航栏，但必须在登录后导航到带有导航栏的组件，该导航栏具有从登录组件（用户名）传递的自定义标题。

当应用加载时，App 组件将与标准的 react Navigator 组件一起加载，该组件依次渲染 Login 组件。当 Login 组件渲染时，它会检查之前的会话，并使用 Navigatorios 组件渲染主应用程序（Wrapper 组件），NavigatorIOS 组件又渲染另一个组件（List 组件，下面的代码中未显示）。

有可能吗？如果是这样，如何:)

我有以下代码：

// The first main component,
// this will be loaded from the AppRegistry
var App = React.createClass(
    render() 
        return (
            <Navigator
                initialRoute=
                    component: Login
                
                renderScene=(route, navigator) => 
                    return React.createElement(route.component,  navigator );         
                 />
        )
    
);

// The login component that
// renders and handles all login processes.
var Login = React.createClass(
    componentDidMount() 
        // ... login logic ...
        this.props.navigator.replace(
            component: Wrapper,
            // I want to pass a title here
        );
    ,

    render() 
        return (
            <Text>Login page</Text>
        )
    
);

// When logged in, the NavigatorIOS component will be
// shown, here is where I want to title previously passed
// from the login component.
var Wrapper = React.createClass(
    render() 
        return (
            <NavigatorIOS
                initialRoute=
                    component: List
                    title: // I want to fetch the title here
                 />
        )
    
);

【参考方案1】：

var Login = React.createClass(
    componentDidMount() 
        // ... login logic ...
        this.props.navigator.replace(
            component: Wrapper,
            componentConfig : 
                title : "My New Title"
            
            // I want to pass a title here
        );
    ,

    render() 
        return (
            <Text>Login page</Text>
        )
    
);

// When logged in, the NavigatorIOS component will be
// shown, here is where I want to title previously passed
// from the login component.
var Wrapper = React.createClass(
    render() 
        return (
            <NavigatorIOS
                initialRoute=
                    component: List
                    title: this.props.title
                 />
        )
    
);

【讨论】：

我试过了，但this.props.title 返回undefined。是 componentConfig 处理这个问题吗？因为我搜索了 google 和 react-native github repo，我找不到任何关于 componentConfig 存在的信息。