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

Posted 2023-03-15

【中文标题】React Native：如何更改 onPress 事件的视图

【英文标题】：React Native : how to change view on onPress event

【发布时间】：2016-01-30 03:25:14

【问题描述】：

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

我知道如何使用onPress 事件，但我不知道应该如何更改整个视图？我正在创建另一个react.createClass，其中包含新的渲染和其他内容，但我不知道应该如何使用它来更改View。

这是我的第一个视图（主要视图）（顺便说一下应用程序名称是 sess）：

var sess = React.createClass(
  render()
    return(

      <View>
        <Button> change view </Button>  //onPress is gonna be here
      </View>
    );
  ,
);

我希望将视图更改为：

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

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

【参考方案1】：

你可以这样做：

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

【讨论】：

谢谢。这真是一个好方法，解决了我的问题。但只是出于好奇，没有其他更简单的方法吗？

@MohammadSiavashi 可能有一种更简单的方法，但它可能与上述基本相同。基本上，将某些东西附加到状态或道具，并根据该值隐藏或显示。

【参考方案2】：

建议您查看 react-native-router-flux 包。

在github上@https://github.com/aksonov/react-native-router-flux

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

例如，我的应用程序的渲染如下。它通过 react-native-router-flux 支持多个视图（描述为场景）。组件属性只是您从 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>;