React Native：如何在不使用NavigatorIOS组件的情况下切换页面？

我是 React js 和 React Native 的新手，我想知道如何在不依赖 navigatorIOS 或 navigator 组件的情况下从一个页面（组件）导航到另一个页面（组件）？在Hybrid开发模式下，很简单，只要添加html元素A带有href属性就可以了，但是在React Native中，不使用NavigatorIOS怎么办？

一种方法是创建一个函数来呈现您想要在单击时显示的组件，基本上复制了 href 的功能：

  changeComponent: function(component) {
    this.setState({
        componentSelected: component    
    })
  },

  renderComponent: function(component) {
        if(component == 'One') {
        return <ComponentOne changeComponent={this.changeComponent} />
      } else if(component == 'Two') {
        return <ComponentTwo changeComponent={this.changeComponent} />
      } else if(component == 'Three') {
        return <ComponentThree changeComponent={this.changeComponent} />
      }
  },

  render: function() {
    return (
      <View style={styles.container}>
        {this.renderComponent(this.state.componentSelected)}
      </View>
    );
  }

并像这样调用该函数：

<TouchableHighlight onPress={() => this.props.changeComponent('Two') } style={styles.button}><Text>Two</Text></TouchableHighlight>

我建立了一个完整的项目here https://rnplay.org/apps/HbqJpA:

https://rnplay.org/apps/HbqJpA https://rnplay.org/apps/HbqJpA

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({

  getInitialState: function() {
        return {
            componentSelected: 'One'
        }
    },

  changeComponent: function(component) {
    this.setState({
        componentSelected: component    
    })
  },

  renderComponent: function(component) {
        if(component == 'One') {
        return <ComponentOne changeComponent={this.changeComponent} />
      } else if(component == 'Two') {
        return <ComponentTwo changeComponent={this.changeComponent} />
      } else if(component == 'Three') {
        return <ComponentThree changeComponent={this.changeComponent} />
      }
  },

  render: function() {
    return (
      <View style={styles.container}>
        {this.renderComponent(this.state.componentSelected)}
      </View>
    );
  }
});

var ComponentOne = React.createClass({
    render: function() {
    return (
        <View style={{backgroundColor: 'red', paddingTop:60, flex:1}}>
        <Text style={{color: 'white', marginBottom:150, fontSize:20}}>Hello From Component One</Text>
        <TouchableHighlight onPress={() => this.props.changeComponent('Two') } style={styles.button}><Text>Two</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.changeComponent('Three') } style={styles.button}><Text>Three</Text></TouchableHighlight>
      </View>
    )
  }
})

var ComponentTwo = React.createClass({
    render: function() {
    return (
        <View style={{backgroundColor: 'orange', paddingTop:60, flex:1}}>
        <Text style={{color: 'white', marginBottom:150, fontSize:20}}>Hello From Component Two</Text>
        <TouchableHighlight onPress={() => this.props.changeComponent('One') } style={styles.button}><Text>One</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.changeComponent('Three') } style={styles.button}><Text>Three</Text></TouchableHighlight>
      </View>
    )
  }
})


var ComponentThree = React.createClass({
    render: function() {
    return (
        <View style={{backgroundColor: 'purple', paddingTop:60, flex:1}}>
        <Text style={{color: 'white', marginBottom:150, fontSize:20}}>Hello From Component Three</Text>
        <TouchableHighlight onPress={() => this.props.changeComponent('One') } style={styles.button}><Text>One</Text></TouchableHighlight>
        <TouchableHighlight onPress={() => this.props.changeComponent('Two') } style={styles.button}><Text>Two</Text></TouchableHighlight>
      </View>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    flexDirection: 'row',
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ededed'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);