React Native中NavigatorIOS组件的简单使用

前端之家收集整理的这篇文章主要介绍了React Native中NavigatorIOS组件的简单使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

NavigatorIOS 导航

NavigatorIOS是React Native自带的导航组件,下面是它的简单应用。

  • 初始化第一个场景
  1. import PropTypes from 'prop-types';
  2. import React,{ Component } from 'react';
  3. import { NavigatorIOS,Text } from 'react-native';
  4. import { NextScene } from 'react-native';
  5.  
  6. export default class NavigatorIOSApp extends Component {
  7. render() {
  8. return (
  9. <NavigatorIOS
  10. initialRoute={{
  11. component: MyScene,title: '初始化第一个场景',}}
  12. style={{flex: 1}}
  13. />
  14. );
  15. }
  16. }
  17.  
  18. class MyScene extends Component {
  19. static propTypes = {
  20. title: PropTypes.string.isrequired,navigator: PropTypes.object.isrequired,}
  21.  
  22. _onForward = () => {
  23. this.props.navigator.push({
  24. component:NextScene
  25. title: '第二个场景'
  26. });
  27. }
  28.  
  29. render() {
  30. return (
  31. <View>
  32. <Text>Current Scene: { this.props.title }</Text>
  33. <TouchableHighlight onPress={this._onForward}>
  34. <Text>前往下一个场景</Text>
  35. </TouchableHighlight>
  36. </View>
  37. )
  38. }
  39. }
  • 第二个场景
  1. export default class NextScene extends Component {
  2.  
  3. render() {
  4. return (
  5. <View>
  6. <Text>这是第二个场景</Text>
  7. </View>
  8. )
  9. }
  10. }

猜你在找的React相关文章