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