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} />
}

React Native渲染相同的路线

1 个答案: