React-Navigation 5.x 的 demo案例

一、 stack路由结构的一些效果

（1）横向过渡动画

（2）整个选项卡样式修饰

最终实现效果：动态图

以上两个功能实现都很简单，我测试时，关注了一个问题，navigation 丢失。stackNavigator除了直接组件会自动拥有navigation属性，其余的都没有，那么解决的办法就是使用withNavigation导出要使用navigation的组件。该属性具体的包在

import {withNavigation} from '@react-navigation/compat'

具体解释：https://reactnavigation.org/docs/compatibility/

功能3：准确叫出每个部位的专业名字（不然每次搜索都不知道叫啥，悲催）

我将 https://reactnavigation.org/docs/stack-navigator 对导航栏、后退按钮、屏幕标题的处理总结在下面代码中

<Stack.Screen name="Chat" component={Chat} options={{
              //1.导航栏的设置

              headerMode: 'screen',

              headerShown: true, //导航栏是否显示

              headerStyle:{      //导航栏的样式

                shadowOffset: {width: 0, height: 0},

                shadowColor: '#1a505050',

                shadowRadius: 2, //阴影模糊半径

                shadowOpacity: 1, // 阴影不透明度

                elevation: 1,      //让安卓拥有灰色阴影 --- 必须

              },


              //2. 设置导航标题的“名字”和“位置”（同时给多个屏幕设置标题？）

              headerTitle: "聊天",

              headerTitleAlign:'center',


              //3. 在headerLeft中可以完全覆盖，后退按钮，也可以使用headerBackImage

              headerLeft:()=><Image style={{width:9,height:16,marginHorizontal:25}} source={require('./img/return_icon.png')}/>
}} />

功能4：stack路由切换时，横向过渡动画

import {TransitionPresets} from '@react-navigation/stack';

<NavigationContainer>

        <Stack.Navigator

          screenOptions={{

               //这三个点是，解构赋值Es6的新写法

            ...TransitionPresets.SlideFromRightIOS

          }}

        >

            <Stack.Screen name="Login" component={Login} options={{headerShown:false}}/>

            <Stack.Screen name="TabCollection" component={TabCollection} />

            <Stack.Screen name="Chat" component={Chat}/>

        </Stack.Navigator>

 </NavigationContainer>

具体看官网解释： https://reactnavigation.org/docs/stack-navigator/#transitionpresets

二、createMaterialTopTabNavigator导航的样式修饰（方便下次直接使用）

1. indicator指示器设置固定宽度，居中

2. 修改选项卡底部样式

效果图如下

import React,{Component} from 'react';

import {View,Text,StyleSheet} from 'react-native';

import { NavigationContainer } from '@react-navigation/native'; //这个只有首页需要

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

// 谁看过我

class HomeScreen extends React.Component{

  render(){

    return (

      <View style={styles.box}>

        <Text>A看过我</Text>

        <Text>B看过我</Text>

      </View>

    )

  }

}

// 我看过谁

class SettingsScreen extends React.Component{

  render(){

    return (

      <View style={styles.box}>

        <Text>我看过 《斗罗大陆》</Text>

        <Text>我看过 《狐妖小红娘》</Text>

      </View>

    )

  }

}

// 构建tab路由

let MyTab = createMaterialTopTabNavigator();

function App() {

  return (

    <NavigationContainer>

      <MyTab.Navigator

        tabBarOptions={{

          activeTintColor: "#345484",  //选中状态标签颜色

          inactiveTintColor: "#232325",//未选中状态标签颜色

          labelStyle:{ //标签文字大小

            fontSize: 16

          },

          indicatorStyle:{//底部指示器样式对象，设置固定宽度居中

            width:32,

            left:"25%",

            marginLeft: -16,

            height: 2,

            backgroundColor:"#345484",

          },

          style:{

            shadowOffset: {width: 0, height: 0},

            shadowColor: '#1a505050',

            shadowRadius: 2, //阴影模糊半径

            shadowOpacity: 1, // 阴影不透明度

            elevation: 1,

          }

        }}

      >

        <MyTab.Screen name="Home" options={{title:"谁看过我"}} component={HomeScreen} />

        <MyTab.Screen name="Settings" options={{title:"我看过谁"}} component={SettingsScreen} />

      </MyTab.Navigator>

    </NavigationContainer>

  );

}

let styles = StyleSheet.create({

  box:{

    flex:1,backgroundColor:'#fff',justifyContent:'center',alignItems:'center'

  }

});

export default App;

这里还有一些关于react-navigation 5.x我所遇到的问题

https://www.cnblogs.com/tengyuxin/p/13394646.html

巴特西

React-Navigation 5.x 的 demo案例

最新文章

热门文章