Question

以下是我的index.ios.js和ProfileView.js，如果LoginView为ProfileView，我希望立即从this.state.toContinue内导航至false。我试图将视图推送到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”引用正在你想要的地方被你在render函数中的if语句改变了。

查看我的内容here。它设置和工作。

请注意，使用.replace时，NavigatorIOS中的标题无法正常运行的已知问题，已讨论过here和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;

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

1 个答案: