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

Question

我是React js和React Native的新手，我想知道如何在不依赖navigatorIOS或navigator组件的情况下从一个页面（组件）导航到另一个页面（组件）？ 在混合开发模式下，它是如此简单，只需添加具有href属性的html元素即可，但是在React Native中，如何在不使用NavigatorIOS的情况下做到这一点？

Answer 1

一种方法是创建一个函数，该函数呈现要在单击时显示的组件，基本上可以复制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>

我在这里建立了一个完整的项目：

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

Answer 2

这是nader的代码，但已更新为最新版本的react-native

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  WebView,
  Dimensions,
  Modal,
  TouchableHighlight
} from 'react-native';

class test extends Component {
  constructor(props)
  {
    super(props);
    this.state =
    {
      componentSelected: 'One',
    }
  }

  changeComponent = (component) =>{
    this.setState({componentSelected: component});
  }

  renderComponent(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() {
    return (
      <View style={styles.container}>
        {this.renderComponent(this.state.componentSelected)}
      </View>
    );
  }
}

class ComponentOne extends Component {
    render() {
    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>
    )
  }
}

class ComponentTwo extends Component {
    render() {
    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>
    )
  }
}


class ComponentThree extends Component {
    render() {
    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>
    )
  }
}

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

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