React Native:如何在不使用 NavigatorIOS 组件的情况下切换页面? [英] React Native: How to switch page without using NavigatorIOS component?

问题描述

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

I'm newbie for react js and react native, I'm wondering how to navigate from one page(component) to another page(component) without relying on navigatorIOS or navigator component? In Hybrid develop mode, it's so easy, just add html element A with href attribute would work, but in React Native, how to do it without using NavigatorIOS?

推荐答案

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

One way would be to create a function that renders the component you would like to show on a click, basically replicating the functionality of an 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>

我在此处设置了一个完整的项目:

I Set up a full project here:

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

这篇关于React Native:如何在不使用 NavigatorIOS 组件的情况下切换页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！