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

Question

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

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

当应用程序加载时，App组件将加载标准的react Navigator组件，该组件又渲染Login组件。当 Login 组件呈现时，它将检查以前的 session ，并使用 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
                }} />
        )
    }
});

Answer 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
                }} />
        )
    }
});