android - react native : how to change view on onPress event

Question

我的第一个渲染 View (默认 View )上有一个按钮，我想在用户按下该按钮时更改 View 。

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

这是我的第一个 View (主视图)(顺便说一句，应用程序名称是 sess):

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

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

我希望将 View 更改为:

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

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

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