在 React Native 中渲染另一个视图答案

【问题标题】：Render another View in React Native在 React Native 中渲染另一个视图
【发布时间】：2016-03-23 19:51:42
【问题描述】：

我在 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 我想显示主页视图。谁能指出如何做到这一点？

【问题讨论】：

您是否考虑过使用导航器推送到另一个屏幕，或者您只是想在同一个视图中显示新内容？
我想在同一个视图中显示新内容...

标签： javascript reactjs react-native button view

【解决方案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);

【讨论】：