React Native技术精讲与高质量上线APP开发------1.2 Navigator的基本使用

1.2 Navigator的基本使用

一 介绍Navigator

1. 什么是Navigator

一个导航组件

进入 下一个界面, 返回上一个界面

传递数据给下一个界面, 返回数据给上一个界面

2. 如何使用Navigator

二 页面导航

通过navigator 实现页面导航和 数据传递

1.目的

从首页跳转到另一个界面

Navigator

Navigator has been removed from the core React Native package in version 0.44. The module has been moved to a react-native-custom-components package that can be imported by your application in order to maintain backwards compatibility.

To see the original docs for Navigator, please switch to an older version of the docs.

效果如下：很简单的例子

男孩点击送女孩一支玫瑰，自动跳转到女孩页面，点击回赠后，自动跳转回男孩界面，并传递参数回去。

在我使用的0.57.0的版本中，Navigator已被移除，需要安装：

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

2. 导入组件 navigator

$ import {Navigator} from ‘react-native-deprecated-custom-components’;

定义初始界面和一些设置(下面给出了代码，主要的地方都有注释，没什么好说的。。。)

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

3. 样式

样式	代码
文字居中	justifyContent:‘center’
文字大小	fontSize: 20
背景色	backgroundColor: ‘red’
显示方式	flex: 1

三 实例代码

定义初始界面和一些设置

Github地址:https://github.com/lenvo222/imooc_gp/tree/57e1f9e68b603951d43f615ea6b2afd4e70697e2

1. APP.js

// App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import {Navigator} from 'react-native-deprecated-custom-components';
import Boy from './Boy'
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'tb_popular',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Navigator
          initialRoute={{
            component:Boy
          }}
          renderScene={(route, navigator) => {  // 渲染的屏幕, 从子组件接受参数
            let Component = route.component; // 从路由中取出组件
            return <Component navigator={navigator} {...route.params}/>; // 返回组件
          }}
          style={{padding: 100}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1: {
    flex: 1,
    backgroundColor: 'red'
  },
  page2: {
    flex: 1,
    backgroundColor: 'yellow'
  },
  image: {
    height: 22,
    width: 22
  }
});

2. Boy.js

import React, {Component} from 'react';
import {View, Text,StyleSheet} from 'react-native';
import Girl from './Girl'

export default class Boy extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word:''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>I am boy</Text>
        <Text style={styles.text}
          onPress={()=>{
            this.props.navigator.push({
              component:Girl,
              params:{
                word: '送女孩一支玫瑰',
                onCallBack:(word) => {
                  this.setState({
                    word:word ,
                  });
                }
              }
            })
          }}
        >送女孩一支玫瑰</Text>
        <Text style={styles.text}>{this.state.word}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
    justifyContent:'center'
  },
  text: {
    fontSize: 20,
    backgroundColor: 'red'
  }
});

3. Girl.js

import React, {Component} from 'react';
import {View, Text,  StyleSheet} from 'react-native';

export default class Girl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word:''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>I am girl</Text>
        <Text style={styles.text}>我收到了男孩送的:{this.props.word}</Text>
        <Text style={styles.text}
              onPress={()=>{
                this.props.onCallBack('一盒巧克力')
                this.props.navigator.pop()
              }}
        >回赠巧克力</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    justifyContent:'center'
  },
  text: {
    fontSize: 22,
  }
});

总结

• Navigator 页面跳转
• 父页面向子页面之间进行数据传递
• 子页面向父页面回传数据