React Native实现 StackNavigator+Ta

首先进入到项目的跟路径然后加载 react-navigation 第三方库 如图

1803258-ccd581e7a6d50692.png

利用五个js文件实现tab切换和导航跳转，首先创建五个六个js文件

2CBCAC12-E82A-4F43-A761-86E9C65D6982.png
在index.ios.js实现多个tab做路由映射，代码实现

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import {
  StackNavigator,
  TabNavigator
} from 'react-navigation';
import MainVC from './MainVC';
import FindVC from './FindVC';
import ReleaseVC from './ReleaseVC';
import NewsVC from './NewsVC';
import MineVC from './MineVC';
import DetailVC from './DetailVC';
// 通过TabNavigator做路由映射
const MainScreentNavigator=TabNavigator({
    MainVC:{screen:MainVC},
    FindVC:{screen:FindVC},
    ReleaseVC:{screen:ReleaseVC},
    NewsVC:{screen:NewsVC},
    MineVC:{screen:MineVC},
});
//引入要用到的跳转页面
const  MyNavigatior = StackNavigator({
    Main:{screen:MainScreentNavigator},
    DetailVC:{screen:DetailVC},
});

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

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

MainVC.js实现方式

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class MainVC extends Component {
  static navigationOptions = {
    headerTitle: '首页',//对页面的配置
    tabBarLabel: '首页',
    tabBarIcon:<View style={{height:30,width:30,backgroundColor:'red'}}></View>
  };
  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',
  },
});

FindVC.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';
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"
export default class FindVC extends Component {
  static navigationOptions = {
    headerTitle: '发现',
    tabBarLabel: '发现',
    tabBarIcon:<View style={{height:30,width:30,backgroundColor:'red'}}></View>
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        
      </View>
    );
  }
}

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

ReleaseVC.js代码实现

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class ReleaseVC extends Component {
  static navigationOptions = {
    headerTitle: '发布',
    tabBarLabel: '发布',
    tabBarIcon:<View style={{height:30,width:30,backgroundColor:'red'}}></View>
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

News.js实现代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class NewsVC extends Component {
 
  static navigationOptions = {
    headerTitle: '消息',
    tabBarLabel: '消息',
    tabBarIcon:<View style={{height:30,width:30,backgroundColor:'red'}}></View>
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

Mine.js代码实现

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TouchableOpacity
} from 'react-native';
export default class MineVC extends Component {
 
 static navigationOptions = {
   headerTitle: '我的',
   tabBarLabel: '我的',
   tabBarIcon:<View style={{height:30,width:30,backgroundColor:'red'}}></View>
 };
 render() {
   const { navigate } = this.props.navigation;
   return (
     <View style={styles.container}>
       
     </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',
  },
});

实现效果如图

QQ20170818-183045-HD.gif