react-native 导航组件react-navigatio

作者: Lyan_2ab3 | 来源:发表于2018-08-13 18:08 被阅读136次

继续上篇文章，还是先看下上篇文章 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 是一个堆栈

react-native 导航组件react-navigatio

1. createStackNavigator 导航栏

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native开发