在React Native中渲染另一個視圖

Question

我在React Native中渲染另一個視圖時遇到問題。

當前，我試圖單擊按鈕來顯示另一個視圖（渲染另一個視圖）。 這是我的React Native代碼：

'use strict';
var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TextInput,
    Button
} = React;


var Button = require('./node_modules/react-native-button');
var TemplateApp = React.createClass({
    _handlePress: function(event) {    
        // CODE TO DISPLAY ANOTHER VIEW
    },

    render: function() {
        return ( 
            <View>
                <Button style = 
                    {{
                        fontSize: 20,
                        height: 40,
                        padding: 5,
                        margin: 10,
                        backgroundColor: 'black',
                        color: 'green'
                    }}
                    styleDisabled = {{color: 'red'}}
                    onPress = {
                        this._handlePress
                    } 
                >
                Sign In 
                </Button>
            </View>
        );
    }
});



var homeApp = React.createClass({
    render: function() {
        return ( < View >
            < Text > Welcome Home < /Text> < /View>
        )
    }
})

AppRegistry.registerComponent('App', () => TemplateApp);

單擊按鈕后， inside the _handlePress function我要顯示主視圖。 誰能指出該怎么做？

Answer 1

您可以通過使用狀態來解決它，並相應地呈現不同的內容。 像這樣：

var TemplateApp = React.createClass({

getInitialState: function() {
   return {buttonPressed: false};
},

_handlePress: function(event) {
    this.setState({buttonPressed: true}
},



render: function() {
   if (!this.state.buttonPressed) {
    return ( < View >
        < Button style = {
            {
                fontSize: 20,
                height: 40,
                padding: 5,
                margin: 10,
                backgroundColor: 'black',
                color: 'green'
            }
        }
        styleDisabled = {
            {
                color: 'red'
            }
        }
        onPress = {
            this._handlePress
        } >
        Sign In < /Button>

        < /View>
    );}
   else {
      return <HomeApp />
    }
}

});



var HomeApp = React.createClass({
    render: function() {
        return ( < View >
            < Text > Welcome Home < /Text> < /View>
        )
    }
})

AppRegistry.registerComponent('App', () => TemplateApp);