Android React Native：如何更改onPress事件的视图

我在第一个渲染视图（默认视图）上有一个按钮，我想在用户按下该按钮时更改视图

我知道如何使用onPress事件，但我不知道如何更改整个视图？我正在创建另一个

react.createClass

，其中包含新的渲染和其他内容，但我不知道如何使用它来更改

视图

以下是我的第一个观点（主要观点）（顺便说一下，应用程序名是sess）：

var sess=React.createClass({
render（）{
返回(
更改视图//onPress将在这里
);
},
});

我希望将视图更改为：

var newView = React.createClass({
  render(){
    return(

      <View>
        <Text> the View is now changed </Text>
      </View>
    );
  },
});

var newView=React.createClass({
render（）{
返回(
视图现在已更改
);
},
});
您可以这样做：

var sess = React.createClass({

  getInitialState(){
    return {
      viewOne: true
    }
  },

  changeView(){
     this.setState({
       viewOne: !this.state.viewOne
     })
  },

  render(){
    if(!this.state.viewOne) return <newView changeView={ () => this.changeView() } />
    return(
      <View>
        <Button onPress={ () => this.changeView() }> change view </Button>
      </View>
    )
  }
})

var newView = React.createClass({
  render(){
    return(
      <View>
        <Text onPress={this.props.changeView}> the View is now changed </Text>
      </View>
    );
  },
});

var sess=React.createClass({
getInitialState（）{
返回{
观点一：是的
}
},
changeView（）{
这是我的国家({
viewOne:！this.state.viewOne
})
},
render（）{
如果（！this.state.viewOne）返回此.changeView（）}/>
返回(
this.changeView（）}>更改视图
)
}
})
var newView=React.createClass({
render（）{
返回(
视图现在已更改
);
},
});
建议您查看包react native router flux

在github@

在项目中布局多个视图的强大方法

例如，下面是我的应用程序的渲染。它通过react native router flux支持多个视图（称为场景）。component属性只是从React.component派生的类

import {Scene, Router, TabBar, Modal, Schema, Actions, Reducer} from 'react-native-router-flux'

  render() {
       return <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}}>
           <Scene key="modal" component={Modal} >
               <Scene key="root" hideNavBar={true}>
                   {/*<Scene key="register" component={Register} title="Register"/>
                   <Scene key="register2" component={Register} title="Register2" duration={1}/>
                   <Scene key="home" component={Home} title="Replace" type="replace"/>*/}
                   <Scene key="launch" initial={true}>
                    <Scene key="launch1" component={Launch}  hideNavBar={true}  style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="privacy" type="push" component={DisplayTextFile} title="Privacy"
                          textFile={DisplayTextFile.PRIVACY} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="terms" type="push" component={DisplayTextFile} title="Terms Of Service"
                            textFile={DisplayTextFile.TERMS} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="login" type="push"  hideNavBar={true}  component={Login} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="forgotPassword" type="push"  hideNavBar={true}  component={ForgotPassword} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="pleaseWait" component={WaitWindow}/>
                    </Scene>
                   <Scene key="pleaseWait" component={WaitWindow} panHandlers={null} />
                   <Scene key="tabbar" tabs={true} default="feed"  panHandlers={null}  >
                       <Scene key="feed" component={FeedScreen} mainfeed={true} title="Feed" hideNavBar={true} icon={TabIcon}/>
                       <Scene key="discover" component={Discover} title="Discover" icon={TabIcon}/>
                       <Scene key="messages" component={Messages} title="Messages"  hideNavBar={true}  icon={TabIcon}/>
                       <Scene key="dashboard" component={Dashboard} title="Profile" hideNavBar={true} icon={TabIcon}/>
                       {/*<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
                       <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} />*/}
                   </Scene>
               </Scene>
               <Scene key="waitWindow" component={WaitWindow} panHandlers={null} />
           </Scene>
       </Router>;
   }

从'react native Router flux'导入{Scene，Router，TabBar，Modal，Schema，Actions，Reducer}
render（）{
返回
{/*
*/}
{/*
*/}
;
}
谢谢。这确实是一个很好的方法，解决了我的问题。但出于好奇，难道没有其他更简单的方法吗？@MohammadSiavashi可能有一种稍微简单一点的方法，但基本上与上述方法相同。基本上，将某物附加到状态或道具，并基于该值隐藏或显示。
import {Scene, Router, TabBar, Modal, Schema, Actions, Reducer} from 'react-native-router-flux'

  render() {
       return <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}}>
           <Scene key="modal" component={Modal} >
               <Scene key="root" hideNavBar={true}>
                   {/*<Scene key="register" component={Register} title="Register"/>
                   <Scene key="register2" component={Register} title="Register2" duration={1}/>
                   <Scene key="home" component={Home} title="Replace" type="replace"/>*/}
                   <Scene key="launch" initial={true}>
                    <Scene key="launch1" component={Launch}  hideNavBar={true}  style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="privacy" type="push" component={DisplayTextFile} title="Privacy"
                          textFile={DisplayTextFile.PRIVACY} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="terms" type="push" component={DisplayTextFile} title="Terms Of Service"
                            textFile={DisplayTextFile.TERMS} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="login" type="push"  hideNavBar={true}  component={Login} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="forgotPassword" type="push"  hideNavBar={true}  component={ForgotPassword} style={{flex:1, backgroundColor:'transparent'}}/>
                        <Scene key="pleaseWait" component={WaitWindow}/>
                    </Scene>
                   <Scene key="pleaseWait" component={WaitWindow} panHandlers={null} />
                   <Scene key="tabbar" tabs={true} default="feed"  panHandlers={null}  >
                       <Scene key="feed" component={FeedScreen} mainfeed={true} title="Feed" hideNavBar={true} icon={TabIcon}/>
                       <Scene key="discover" component={Discover} title="Discover" icon={TabIcon}/>
                       <Scene key="messages" component={Messages} title="Messages"  hideNavBar={true}  icon={TabIcon}/>
                       <Scene key="dashboard" component={Dashboard} title="Profile" hideNavBar={true} icon={TabIcon}/>
                       {/*<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
                       <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} />*/}
                   </Scene>
               </Scene>
               <Scene key="waitWindow" component={WaitWindow} panHandlers={null} />
           </Scene>
       </Router>;
   }