react native Navigator

来源：互联网发布：mac打开u盘隐藏文件编辑：程序博客网时间：2024/05/31 11:03

下面代码来自http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/

/** * 导航器组件实例 * https://github.com/facebook/react-native */'use strict';import React, {  AppRegistry,  Component,  StyleSheet,  Text,  View,  TouchableHighlight,  Navigator,} from 'react-native'; class NavButton extends React.Component {  render() {    return (      <TouchableHighlight        style={styles.button}        underlayColor="#B5B5B5"        onPress={this.props.onPress}>        <Text style={styles.buttonText}>{this.props.text}</Text>      </TouchableHighlight>    );  }}class NavMenu extends React.Component {  render() {    return (      <View style={styles.scene}>        <Text style={styles.messageText}>{this.props.message}</Text>        <NavButton          onPress={() => {            this.props.navigator.push({              message: '向右拖拽关闭页面',              sceneConfig: Navigator.SceneConfigs.FloatFromRight,            });          }}          text="从右边向左切入页面(带有透明度变化)"        />        <NavButton          onPress={() => {            this.props.navigator.push({              message: '向下拖拽关闭页面',              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,            });          }}          text="从下往上切入页面(带有透明度变化)"        />        <NavButton          onPress={() => {            this.props.navigator.pop();          }}          text="页面弹出(回退一页)"        />        <NavButton          onPress={() => {            this.props.navigator.popToTop();          }}          text="页面弹出(回退到最后一页)"        />      </View>    );  }}class NavigatorDemo extends Component {  render() {    return (      <Navigator        style={styles.container}        initialRoute={{ message: '初始页面', }}        renderScene={ (route, navigator) => <NavMenu            message={route.message}            navigator={navigator}          />}         configureScene={(route) => {          if (route.sceneConfig) {            return route.sceneConfig;          }          return Navigator.SceneConfigs.FloatFromBottom;        }}      />    );  }}const styles = StyleSheet.create({   container: {    flex: 1,   },   messageText: {    fontSize: 17,    fontWeight: '500',    padding: 15,    marginTop: 50,    marginLeft: 15,  },  button: {    backgroundColor: 'white',    padding: 15,    borderBottomWidth: StyleSheet.hairlineWidth,    borderBottomColor: '#CDCDCD',  },}); AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

运行报错，navigator is deprecated and has been removed。

打开当前目录，

npm install react-native-deprecated-custom-components --save

import {Navigator} from 'react-native-deprecated-custom-components';

修改后代码如下

'use strict';import React, {Component} from 'react';import  {  AppRegistry,  StyleSheet,  Text,  View,  TouchableHighlight,} from 'react-native';import {Navigator} from 'react-native-deprecated-custom-components';class NavButton extends Component {  render() {    return (      <TouchableHighlight        style={styles.button}        underlayColor="#B5B5B5"        onPress={this.props.onPress}>        <Text style={styles.buttonText}>{this.props.text}</Text>      </TouchableHighlight>    );  }}class NavMenu extends React.Component {  render() {    return (      <View style={styles.scene}>        <Text style={styles.messageText}>{this.props.message}</Text>        <NavButton          onPress={() => {            this.props.navigator.push({              message: '向右拖拽关闭页面',              sceneConfig: Navigator.SceneConfigs.FloatFromRight,            });          }}          text="从右边向左切入页面(带有透明度变化)"        />        <NavButton          onPress={() => {            this.props.navigator.push({              message: '向下拖拽关闭页面',              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,            });          }}          text="从下往上切入页面(带有透明度变化)"        />        <NavButton          onPress={() => {            this.props.navigator.pop();          }}          text="页面弹出(回退一页)"        />        <NavButton          onPress={() => {            this.props.navigator.popToTop();          }}          text="页面弹出(回退到最后一页)"        />      </View>    );  }}class NavigatorDemo extends Component {  render() {    return (      <Navigator        style={styles.container}        initialRoute={{ message: '初始页面', }}        renderScene={ (route, navigator) => <NavMenu            message={route.message}            navigator={navigator}          />}         configureScene={(route) => {          if (route.sceneConfig) {            return route.sceneConfig;          }          return Navigator.SceneConfigs.FloatFromBottom;        }}      />    );  }}const styles = StyleSheet.create({   container: {    flex: 1,   },   messageText: {    fontSize: 17,    fontWeight: '500',    padding: 15,    marginTop: 50,    marginLeft: 15,  },  button: {    backgroundColor: 'white',    padding: 15,    borderBottomWidth: StyleSheet.hairlineWidth,    borderBottomColor: '#CDCDCD',  },});AppRegistry.registerComponent('testrn', () => NavigatorDemo);

阅读全文

0 0