react-native 导航组件react-navigation详解
react-native 导航组件react-navigation详解
0.2622018.08.13 18:08:47字数 716阅读 2,285
继续上篇文章 ，还是先看下上篇文章 react-navigation 的官方文档，没看也没有关系，请看下面我的唠叨
我们 配置路由，话不多说，直接还是贴代码吧。
1、 StackNavigator: 用于app界面窗口之间的切换
2 、TabNavigator: 用于设置一个界面的不同tabs
3、 DrawerNavigator: 抽屉效果，侧边滑出
充当router.js,这是自己的 demo 底部有tab 切换的路由
import {StackNavigator,TabNavigator} from 'react-navigation';
import HomePage from './home/index'; //首页
import TaskPage from './popularize/index';// 根据自己想建什么页面都可以
import Mine from './mine/index'; //可以认为是个人中心
import AlbumList from './albumList/index'; // 另外一个页面
import ComponentsPage from './ComponentsPage/index' // 这是我页面我用来写第三方组件，demo
export const TabNav = TabNavigator(
{
Home: {
screen: HomePage,
},
Task: {
screen: TaskPage,
navigationOptions: {
title: '专辑列表',
tabBarLabel: "专辑列表",
}
},
Components:{
screen:ComponentsPage,
navigationOptions:{
title:'三方组件库',
tabBarLabel:'第三方'
}
},
Mine: {
screen: Mine,
navigationOptions:({navigation})=>( {
headerTitle: "个人中心",
tabBarLabel: "我的",
})
}
},
{
tabBarOptions: {
//当前选中的tab bar的文本颜色和图标颜色
activeTintColor: '#4BC1D2',
//当前未选中的tab bar的文本颜色和图标颜色
inactiveTintColor: '#000',
//是否显示tab bar的图标，默认是false
showIcon: false,
//showLabel - 是否显示tab bar的文本，默认是true
showLabel: true,
//是否将文本转换为大小，默认是true
upperCaseLabel: false,
//material design中的波纹颜色(仅支持Android >= 5.0)
pressColor: '#788493',
//按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
pressOpacity: 0.8,
//tab bar的样式
style: {
backgroundColor: '#fff',
paddingBottom: 1,
borderTopWidth: 0.2,
paddingTop:1,
borderTopColor: '#ccc',
},
//tab bar的文本样式
labelStyle: {
fontSize: 11,
margin: 1
},
//tab 页指示符的样式 (tab页下面的一条线).
indicatorStyle: {height: 0},
},
//tab bar的位置, 可选值： 'top' or 'bottom'
tabBarPosition: 'bottom',
//是否允许滑动切换tab页
swipeEnabled: true,
//是否在切换tab页时使用动画
animationEnabled: true,
//是否懒加载
lazy: true,
//返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
backBehavior: 'none',
}
);
// 注册所有的页面
export default StackNavigator({
Main: {
screen: TabNav,
},
AlbumList: {
screen: AlbumList,
}
},
{
headerMode: 'screen', // 标题导航
initialRouteName: 'Main', // 默认先加载的页面组件
mode: 'card' // 定义跳转风格(card、modal)
}
)
路由配置好所有的组件都注册完成之后肯定要挂载
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import Router from './src/index'; // 这个就是上面 的代码，router 配置
import {Platform, StyleSheet, Text, View,Image,TextInput,Button,Alert} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
constructor(props){
super(props)
}
render() {
return (
<View style={styles.container}>
<View style={{flex: 1}}>
<Router/> // 在这边直接引入就好了
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
// alignItems: 'center',
backgroundColor: "#F5FCFF"
}
});
出来的效果，这样点击底部的 tab 就可以切换页面了
首页tab.jpeg
上面 我的代码是 StackNavigator 和 TabNavigator 实现的底部tab 但是 后来发现 createBottomTabNavigator 可以实现
下面针对react-navigation 的几个属性 写个简单的demo，便于理解，😀
1. createStackNavigator 导航栏
（现在都用这个我不知道和StackNavigator 具体有什么区别，按照官网的来吧）
- createStackNavigator(RouteConfigs, StackNavigatorConfig);
一次渲染一个页面，并提供页面之间的转换。 当一个新的页面被打开时，它被放置在堆栈顶部。 - createBottomTabNavigator 渲染一个 tab bar，让用户可以在多个页面之间切换
- createSwitchNavigator - 在一个页面和另一个页面之间进行切换，在屏幕上没有 UI，在页面变为非活动状态时卸载页面。
- createDrawerNavigator - 提供从左侧滑入的抽屉。
1、createStackNavigator
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createStackNavigator(
{
Main: { screen: HomeScreen },
Login: { screen: SettingsScreen },
},
{
headerMode: 'none',
mode: 'modal',
navigationOptions: {
gesturesEnabled: false,
}，
}
);
上面的代码 只是简单的实现 页面之间的切换
2、createBottomTabNavigator 可以实现底部 tabbar，点击tab 实现 页面之间的切换 但是这个只是适用于 tab 页面的切换，如果想要出现tab 之外的页面 还要结合到 createStackNavigator
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
export default createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
上面代码的效果图
tab test.jpeg
3、如果我们的页面不止于 底部的导航的页面
假如我首页 有个按钮要到详情页面，或者个人中心页面 也有个按钮到详情页面，或者其他的页面，这个都是很正常的操作，那么我们如果添加 其他的路由呢？ 其实这个就和 最上面的贴出的代码 是一样的逻辑。 你可以将此视为在每个选项卡中存在单独的导航堆栈
import React from 'react';
import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator, createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: '首页',
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>我是首页!</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: '个人中心',
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>我是个人中心!</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
//这个DetailsScreen 就是新加的路由 从首页到 DetailsScreen 就成了两个页面之间的 跳转这样就用到了createStackNavigator，
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Details: DetailsScreen,
});
export default createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
},
{
/* Other configuration remains unchanged */
}
);
效果如图
1.jpeg
2.jpeg
3.jpeg
页面少的话 可以这样写，如果很多个页面之间的切换,可以采用
整个tab 为一个导航堆栈，代码改为如下
import React from 'react';
import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator, createStackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: '首页',
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>我是首页!</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: '个人中心',
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>我是个人中心!</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
}
export const TabNav = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
/* Other configuration remains unchanged */
}
);
export default createStackNavigator({
Home: TabNav, // 输出的是 底部tab
Details: DetailsScreen, // 不在tab 上的路由
});
代码运行结果：
4.jpeg
你会发现 和上个方法不一样，点击tab 的时候其实页面页面 没有变化，跳转到详情页面的时候 会从一方划入（这个可设置的效果）也就说明了 整个tab 是一个堆栈
漫思
