react-native react-navigation使用

npm install react-navigation --save 安装

代码中引入StackNavigator组件

 

5CF902D1-9639-494D-8775-A9A87F376734.png

代码实现分三个js页面实现，index.ios.js MainVC.js首页 DetailVC.js详情页面
首先来看一下 index.ios.js实现代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';
import DetailVC from './DetailVC';
import MainVC from './MainVC';
// StackNavigator配置，默认显示MianVC页面
const MyNavigatior = StackNavigator(
  {
    MainVC: {screen: MainVC },
    DetailVC: {screen: DetailVC},
  },
  {
    initialRouteName: 'MainVC',//默认路由，就是第一个要显示的页面
  }
);


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

AppRegistry.registerComponent('MyNavigatior', () => MyNavigatior);

然后看MainVC.js首页实现代码

mport React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class MainVC extends Component {
  static navigationOptions = {
    title: '首页'//对页面的配置
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{height:60,backgroundColor:'orange',justifyContent: 'center',}}
                          onPress={() => navigate('DetailVC', { title: '详情',des:'我是返回点击我' })} >
           <Text>点击进详情页</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

在看DetailVC.js首页实现代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class DetailVC extends Component {
  //接收上一个页面传过来的title显示出来
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title
  });
  // 点击返回上一页方法
  backVC=()=>{
    //返回首页方法
    this.props.navigation.goBack();
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.container}>
          <TouchableOpacity style={{
                                    height:40,
                                    backgroundColor:'green',
                                    justifyContent: 'center'}}
                            onPress={() =>{this.backVC()}}>
             <Text>{this.props.navigation.state.params.des}</Text>
          </TouchableOpacity>
        </View>
    );
  }
}

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

最看看一下实现的效果图
iOS

 

QQ20170818-115330-HD.gif

Android

 

QQ20170818-115425-HD.gif

作者：wangjiawei
链接：https://www.jianshu.com/p/90b3d57c3d74
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。