首先进入到项目的跟路径然后加载 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
