首先進(jìn)入到項(xiàng)目的跟路徑然后加載 react-navigation 第三方庫 如圖

1803258-ccd581e7a6d50692.png

利用五個(gè)js文件實(shí)現(xiàn)tab切換和導(dǎo)航跳轉(zhuǎn)，首先創(chuàng)建五個(gè)六個(gè)js文件

2CBCAC12-E82A-4F43-A761-86E9C65D6982.png

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},
});
//引入要用到的跳轉(zhuǎn)頁面
const  MyNavigatior = StackNavigator({
    Main:{screen:MainScreentNavigator},
    DetailVC:{screen:DetailVC},
});

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

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

MainVC.js實(shí)現(xiàn)方式

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:'我是返回點(diǎn)擊我' })} >
           <Text>點(diǎn)擊進(jìn)詳情頁</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

FindVC.js代碼實(shí)現(xiàn)

/**
 * 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: '發(fā)現(xiàn)',
    tabBarLabel: '發(fā)現(xiàn)',
    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代碼實(shí)現(xiàn)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class ReleaseVC extends Component {
  static navigationOptions = {
    headerTitle: '發(fā)布',
    tabBarLabel: '發(fā)布',
    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實(shí)現(xiàn)代碼

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代碼實(shí)現(xiàn)

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實(shí)現(xiàn)，實(shí)現(xiàn)跳轉(zhuǎn)帶參數(shù)并且按鈕執(zhí)行返回

/**
 * 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 {
  //接收上一個(gè)頁面?zhèn)鬟^來的title顯示出來
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title
  });
  // 點(diǎn)擊返回上一頁方法
  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',
  },
});

實(shí)現(xiàn)效果如圖

QQ20170818-183045-HD.gif