如何在渲染时或渲染前跳转到另一个视图？

Question

下面是我的 index.ios.js 和 ProfileView.js，如果 this.state.toContinue 是 false，我想立即从 ProfileView 导航到 LoginView .我试图将视图推到 this.props.navigator 但它没有用 :(

// index.ios.js
"use strict";

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

var {
    AppRegistry,
    StyleSheet,
    NavigatorIOS,
} = React;

var ProfileView = require('./ProfileView');

var project = React.createClass({
    render: function() {
        return (
            <NavigatorIOS
                style={styles.navigationContainer}
                initialRoute={{
                    title: "Your Profile",
                    component: ProfileView
                }}
            />
        );
    }
});

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

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


// ProfileView.js
"use strict";

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

var LoginView = require("./LoginView");

var {
    Component,
    StyleSheet,
    View,
} = React;


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

    isSignedIn () {
        return false;
    }

    render () {
        if (!this.state.toContinue) {
            // jump to LoginView
        }

        return (
            <View style={styles.container}>
                <Text>
                    Welcome
                </Text>
            </View>
        );
    }
};


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

module.exports = ProfileView;

感谢任何帮助！

Answer 1

我很确定它不起作用的原因是你的 "this" 引用被渲染函数中的 if 语句从你想要的位置更改了。

看看我有什么here。它已设置并正在运行。

请注意，NavigatorIOS 中的标题在使用 .replace 时无法正常运行的已知问题已讨论 here and here。

工作代码也在下面：

"use strict";

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

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

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

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

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


// ProfileView.js
"use strict";

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

var LoginView = React.createClass({

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

})

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

    isSignedIn () {
        return false;
    }

    changeView() {
        this.props.navigator.replace({
        component: LoginView,
        title: 'LoginView',
      })
    }

    componentDidMount() {
      if (!this.state.toContinue) {
        this.changeView()
      }
    }

    render () {
        return (
            <View style={styles.container}>
                <Text>
                    Welcome
                </Text>
            </View>
        );
    }
};


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

module.exports = ProfileView;

如何在渲染时或渲染前跳转到另一个视图？

How to jump to another view on or before render?

mobile

navigator

reactjs

react-native