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

【问题标题】：How to redirect to a page in React Native?如何重定向到 React Native 中的页面？
【发布时间】：2015-11-23 19:34:58
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-jsx

【解决方案1】：

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

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

pop() - 返回一页

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

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

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

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

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

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

popToTop() - 返回顶部项目

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

我已经构建了一个基本演示 here 来演示这一点。（尝试将 .replace 替换为 .push 以查看其他常用功能）代码也在下面（注意 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;

【讨论】：

我正在使用 navigator 而不是 navigatorIos，然后如何移回 2 页，它在 navigator popN(n) 中不起作用 - 一次返回 N 页。当 N=1 时，行为匹配 pop() ，你能告诉我哪一个用于向后移动 2 页
ExceptionsManager.js:63 无法读取 ANDROID 的未定义属性“替换”

【解决方案2】：

您可以在初始路线页面中执行类似的操作 -

renderScene(route, navigator) {
    switch (route.id) {
      case 'first-page':
        var AppFirstPage = require('./app/components/FirstPage');
        return <AppFirstPage navigator={navigator} route={route} user={this.data.user}/>;
        break;
      case 'login-page':
        var LoginPage = require('./app/components/LoginPage');
        return <LoginPage navigator={navigator} route={route}/>;
        break;
      case 'signup-page':
        var SignUpPage = require('./app/components/SignUpPage');
        return <SignUpPage navigator={navigator} route={route}/>;
        break;
    }
  },

现在，无论何时你想去特定的路线，你都可以这样做 -

this.props.navigator.push({
  id: 'signup-page',
  sceneConfig: Navigator.SceneConfigs.FloatFromBottom
})

希望这会有所帮助。干杯！

【讨论】：