如何重定向到 React Native 中的页面? [英] How to redirect to a page in React Native?

问题描述

this.props.navigator.push({
  component: MainView,
  passProps: {selectedTab: 'home', message: 'this is the messages'},
});

这是重定向页面的唯一方法吗?也就是说，当条件命中时，我想渲染另一个页面，在 React Native 中正确的做法是什么?

Is this the only way to redirect page? That said, when condition hit, I want to render another page, what is the right way to do in React Native?

推荐答案

重定向页面的方法有很多种.在 React Native 文档中，以下是 Navigator 可用的方法:

There are quite a few different ways to do redirect the page. From the React Native docs, here are the methods available to Navigator:

push(route) - 向前导航到新路线

push(route) - Navigate forward to a new route

pop() - 返回一页

popN(n) - 一次返回 N 页.当 N=1 时，行为匹配 pop()

popN(n) - Go back N pages at once. When N=1, behavior matches pop()

replace(route) - 替换当前页面的路由并立即加载新路由的视图

replace(route) - Replace the route for the current page and immediately load the view for the new route

replacePrevious(route) - 替换上一页的路由/视图

replacePrevious(route) - Replace the route/view for the previous page

replacePreviousAndPop(route) - 替换之前的路由/视图并转换回它

replacePreviousAndPop(route) - Replaces the previous route/view and transitions back to it

resetTo(route) - 替换顶部 item 和 popToTop

resetTo(route) - Replaces the top item and popToTop

popToRoute(route) - 返回到特定路由对象的项目

popToRoute(route) - Go back to the item for a particular route object

popToTop() - 返回顶部项目

要根据条件更改视图，您可以使用一个函数调用 this.props.navigator 到 componentWillMount 和 componentWillUpdate 中的上述操作之一，如果状态变量发生更改，则调用该函数.

To change view based on a condition, you can have a function that calls this.props.navigator to one of the above actions in the componentWillMount and componentWillUpdate, calling the function if a state variable changes.

我已经构建了一个基本的演示此处来演示这一点.(尝试用 .push 替换 .replace 以查看其他常用功能)代码也在下面(注意 changeView 函数).

I've built a basic demo here demonstrating this. (try replacing .replace with .push to see other common functionality) The code is also below (note the changeView function).

https://rnplay.org/apps/qHEJxQ

"use strict";

var React = require("react-native");

var {
    AppRegistry,
    StyleSheet,
    NavigatorIOS,
    Component,
    TouchableHighlight,
    StyleSheet,
    View,
  Text
} = React;

var project = React.createClass({
    render: function() {
        return (
            <NavigatorIOS
                style={{flex:1}}
                initialRoute={{
                    component: ProfileView,
                            title: 'ProfileView' 
                }}
            />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

AppRegistry.registerComponent("project", () => project);

var LoginView = React.createClass({

  render: function() {
    return(
        <View style={{flex:1}}> 
            <Text style={{marginTop:100}}>Hello from LOGIN VIEW</Text>
      </View>
    )
  }

})

class ProfileView extends Component {
    constructor (props) {
        super(props);
        this.state = {
            signedin: false
        };
    }

    componentDidUpdate() {
        if(this.state.signedIn) {
        this.props.navigator.replace({
          component: LoginView,
          title: 'LoginView',
        })
      }
    }

    componentDidMount() {
        if(this.state.signedIn) {
        this.props.navigator.replace({
          component: LoginView,
          title: 'LoginView',
        })
      }
    }

    changeView() {
        this.setState({
        signedIn: true
      });
    }

    render () {
        return (
            <View style={styles.container}>
                <Text style={{marginTop:200}}>
                    Welcome
                </Text>
                    <TouchableHighlight onPress={ () => this.changeView() } style={{height:50, flexDirection: 'row', justifyContnet: 'center',backgroundColor: '#ddd'}}>
                    <Text style={{fontSize:20}}>Sign In</Text>
          </TouchableHighlight>
            </View>
        );
    }
};


var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

module.exports = ProfileView;

这篇关于如何重定向到 React Native 中的页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！