React Native中Navigator的基本使用，实现简单的页面之间的跳转和页面数据传递

效果如下：很简单的例子，大佬勿喷啊...

点击查看多少钱后，自动跳转到超市页面，点击回答价格后，自动跳转回顾客界面，并传递参数回去。

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

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

然后在使用的地方导入：

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

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

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import People from './res/demo1/people';
import {Navigator} from 'react-native-deprecated-custom-components';

export default class App extends Component<Props> {
  /*初始化state*/
  constructor(props){
      super(props);
      this.state={
        msg:'people',
      }
  }


  render() {
    return (
      <View style={styles.container}>
         <Navigator
             initialRoute={{
                 component:People  //首先显示的界面
                }
             }
             renderScene={(route,navigator)=>{
                    let Component = route.component; //取出路由里传过来的组件  组件名要大写
                    return <Component navigator={navigator} {...route.params} /> //navigator={navigator} 组件传过去 {...route.params}  组件的延展属性
                }
             }
         />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center'
    },
});

定义prople.js

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

export default class people extends Component<Props> {
    /*初始化state*/
    constructor(props){
        super(props);
        this.state={
            msg:'',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.myText}>我是顾客</Text>
                <Text style={styles.myText1}
                    onPress={()=>{
                        this.props.navigator.push({ //显示下一个界面
                            component:Supermarket,
                            params:{
                                msg:'购买了一个冰淇淋',
                                onCallBack:(msg)=>{ //自定义的回调函数，跟超市的桥梁，传递超市返回给顾客的信息
                                    this.setState({
                                        msg:msg
                                    })
                                }
                            }//params end
                        })//push end
                    }}//onPress end
                >《我想购买一个冰淇淋，点击知道需要多少钱！》</Text>
                <Text style={styles.myText}>{this.state.msg}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',
        alignItems: 'center'
    },
    myText:{
       fontSize:20,
    },
    myText1:{
       backgroundColor: '#f9ff2b'
    }
});

定义supermarket.js

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

export default class supermarket extends Component<Props> {
    /*初始化state*/
    constructor(props){
        super(props);
        this.state={

        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.myText}>我是超市</Text>
                <Text style={styles.myText}>顾客购买记录：{this.props.msg}</Text>
                <Text style={styles.myText1}
                    onPress={()=>{
                        this.props.onCallBack('需要15元')
                        this.props.navigator.pop()  //关闭当前页面
                       }
                    }
                >《点击回答顾客冰淇淋价格》</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        justifyContent: 'center',//垂直居中
        alignItems: 'center' //水平居中
    },
    myText:{
        fontSize:20
    },
    myText1:{
        backgroundColor: '#f9ff2b'
    }
});

React Native中Navigator的基本使用，实现简单的页面之间的跳转和页面数据传递

猜你喜欢