我在 React Native 中渲染另一个 View 时遇到问题。

目前，我试图通过单击按钮来显示另一个 View (渲染另一个 View )。这是我的 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); 

单击按钮时，在 _handlePress 函数内我想显示主页 View 。谁能指出如何做到这一点？

请您参考如下方法:

您可以通过使用状态来解决它并相应地呈现不同的内容。像这样的事情:

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);