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

Question

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

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

Answer 1

有很多不同的方法可以重定向页面.从React Native文档中,以下是Navigator可用的方法:

推(路线) - 向前导航到新路线

pop() - 返回一页

popN(n) - 立即返回N页.当N = 1时,行为与pop()匹配

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

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

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

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

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

popToTop() - 返回顶部项目

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

我在这里建立了一个基本演示来演示这个.(尝试用.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;