react-native - 如何重定向到 React Native 中的页面？

Question

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

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

Answer 1

有很多不同的方法可以重定向页面。从 React Native 文档来看，以下是 Navigator 可用的方法:

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

pop() - 返回一页

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

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

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

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

resetTo(route) - 替换顶部项目和 popToTop

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

popToTop() - 返回顶部项目

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

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

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;