javascript - React Native 渲染相同的路线

Question

我想在 React Native 中按下按钮时更改路由。在我的 SplashContainer 组件中，这是我正在运行的方法:

handleToSignUp = () => {
    console.log("Running handleToSignUp")
    this.props.navigator.push({
        signUpForm: true
    });
}

我的导航器组件如下所示

export default class NimbusNavigator extends Component {
    static propTypes = {
        isAuthed: PropTypes.bool.isRequired
    }
    renderScene = (route, navigator) => {
        console.log(route);
        console.log(navigator);
        // Keeps track of whether user is Authed or not. 
        if (this.props.isAuthed === false && route !== 'signUpForm') {
            return <SplashContainer navigator={navigator}/>
        } else if (route === 'signUpForm') {
            return <SignUpForm navigator={navigator} />
        }

        return <FooterTabsContainer navigator={navigator} />
    }
    configureScene = (route) => {
        return Navigator.SceneConfigs.FloatFromRight
    }
    render () {
        return (
            <Navigator
                configureScene={this.configureScene}
                renderScene={this.renderScene}
            />
        )
    }
}

如果route不等于'signUpForm'不应将代码跳到 else if声明和渲染 <SignUpForm/>成分？

谢谢!

Answer 1

有几种方法可以实现此目的，但要记住的主要一点是传递给 navigator.push({//properties of the Route object }) 的所有内容都将成为路由的属性对象。

例如，如果您保持 handleSignUp 方法不变，则需要重写您的 renderScene 方法，如下所示:

renderScene = (route, navigator) => {
    if (this.props.isAuthed === false && !route.signUpForm) {
        return <SplashContainer navigator={navigator}/>
    } else if (route.signUpForm) {
        return <SignUpForm navigator={navigator} />
    }

    return <FooterTabsContainer navigator={navigator} />
}

您还可以像这样重写您的 handleSignUp 方法:

handleToSignUp = () => {
    this.props.navigator.push({
        title: 'handleSignUpForm'
    });
}

和 renderScene 像这样:

renderScene = (route, navigator) => {
    if (this.props.isAuthed === false && route.title !== 'signUpForm') {
        return <SplashContainer navigator={navigator}/>
    } else if (route.title === 'signUpForm') {
        return <SignUpForm navigator={navigator} />
    }

    return <FooterTabsContainer navigator={navigator} />
}