react native 封裝一個通用的NavBar 導航欄筆記

需求：

react native 封裝一個通用的NavBar 導航欄其他包括自定義一StatusBar裡面的屬性，和頁面标題、傳回按鈕，右面自定義操作

思路

要封裝一個通用的導航欄，您可以使用React Native提供的Navigator元件。以下是一個簡單的例子，展示了如何建立一個通用的導航欄，包括自定義的狀态欄和傳回按鈕：

import React from 'react';  
import { Navigator, StatusBar, Text, TouchableOpacity } from 'react-native';  
  
// 建立一個通用的導航欄元件  
const NavBar = (props) => {  
  const { navigator, title, onPressBack, onRightButtonPress } = props;  
  
  return (  
    <Navigator.Navigator  
      initialRoute={{ name: 'Home' }}  
      renderScene={(route, navigator) => {  
        // 傳遞給子元件的props  
        const routeProps = {  
          navigator,  
          route,  
        };  
  
        // 根據route來決定顯示哪個元件  
        switch (route.name) {  
          case 'Home':  
            return <Home {...routeProps} />;  
          case 'Profile':  
            return <Profile {...routeProps} />;  
          // 添加更多的路由元件...  
          default:  
            return <NotFound />;  
        }  
      }}  
    >  
      <Navigator.Navigator.Header  
        title={title}  
        onPressBack={onPressBack}  
        onPressRightButton={onRightButtonPress}  
        rightButtonIcon={require('./assets/icons/search.png')}  
        style={{ backgroundColor: '#f4511e' }}  
        navigator={navigator}  
      />  
    </Navigator.Navigator>  
  );  
};  
  
// 實作自定義的傳回按鈕和右邊的按鈕  
const Home = (props) => {  
  const { navigator, route } = props;  
  
  const onPressBack = () => {  
    if (navigator.getCurrentRoutes().length > 1) {  
      navigator.pop();  
    }  
  };  
  
  const onRightButtonPress = () => {  
    // 在這裡添加自定義的右邊按鈕操作  
    console.log('Right button pressed!');  
  };  
  
  return (  
    <TouchableOpacity onPress={onPressBack}>  
      <Text style={{ color: 'white', fontSize: 16 }}>傳回</Text>  
    </TouchableOpacity>  
  );  
};  
  
const Profile = (props) => {  
  // 在這裡添加您的Profile元件實作  
};  
  
const NotFound = (props) => {  
  // 在這裡添加您的NotFound元件實作  
};  
  
export default NavBar;           

分析

在上面的代碼中，我們建立了一個名為NavBar的通用導航欄元件。它接受一些props，包括navigator、title、onPressBack和onRightButtonPress。Navigator是React Native提供的用于管理導航的元件，StatusBar是用于設定狀态欄樣式的元件，Text和TouchableOpacity是用于顯示傳回按鈕的元件。

在NavBar元件中，我們使用Navigator.Navigator來包裹我們的導航欄和場景。我們使用Navigator.Navigator.Header來建立導航欄的标題部分，包括傳回按鈕和右邊的按鈕。我們還實作了Home元件，用于顯示傳回按鈕和右邊的按鈕的操作。

在您的應用程式中，您可以使用NavBar元件來包裝您的頁面，并傳遞相應的props。例如：

import React from 'react';  
import { AppRegistry, StyleSheet } from 'react-native';  
import NavBar from './NavBar';  
  
const App = () => {  
  return (  
    <NavBar  
      navigator={navigator}  
      title="我的應用"  
      onPressBack={() => console.log('Back button pressed!')}  
      onRightButtonPress={() => console.log('Right button pressed!')}  
    />  
  );  
};           

方案2

要封裝一個通用的導航欄，你可以使用React Native提供的Navigator元件。以下是一個簡單的例子，展示了如何實作一個包含狀态欄屬性、頁面标題和傳回按鈕的通用導航欄：

import React from 'react';  
import { Navigator, StatusBar, Text, TouchableOpacity } from 'react-native';  
  
const NavigationBar = ({ route, navigator }) => {  
  const { state, push, pop } = navigator;  
  const currentRoute = state.routeStack[state.index];  
  
  // 自定義狀态欄屬性  
  StatusBar.setBarStyle('light', true);  
  StatusBar.setHidden(false, true);  
  StatusBar.setNetworkActivityIndicatorVisible(false, true);  
  
  // 頁面标題  
  const title = currentRoute.title ? currentRoute.title : '未知頁面';  
  
  // 傳回按鈕  
  const backButton = (  
    <TouchableOpacity onPress={() => pop()} style={{ paddingHorizontal: 15 }}>  
      <Text style={{ color: '#fff', fontSize: 16 }}>傳回</Text>  
    </TouchableOpacity>  
  );  
  
  // 右面自定義操作  
  const rightButton = (  
    <TouchableOpacity onPress={() => push('NextScreen')} style={{ paddingHorizontal: 15 }}>  
      <Text style={{ color: '#fff', fontSize: 16 }}>自定義操作</Text>  
    </TouchableOpacity>  
  );  
  
  return (  
    <Navigator.NavigationBar  
      route={route}  
      navigator={navigator}  
      style={{ backgroundColor: '#3b5998' }}  
    >  
      <Navigator.Row>  
        <Navigator.Row.Content>  
          {backButton}  
          <Navigator.Title>{title}</Navigator.Title>  
          {rightButton}  
        </Navigator.Row.Content>  
      </Navigator.Row>  
    </Navigator.NavigationBar>  
  );  
};  
  
export default NavigationBar;           

在這個例子中，我們使用了Navigator元件來建立導航欄。在NavigationBar元件中，我們通過傳入的route和navigator屬性來通路目前路由和導航器。我們使用StatusBar元件來設定狀态欄的屬性，如樣式、隐藏和網絡活動訓示器。

在頁面标題方面，我們通過檢查目前路由的title屬性來擷取頁面标題，如果沒有title屬性，則将标題設定為“未知頁面”。

在傳回按鈕方面，我們使用TouchableOpacity和Text元件來建立一個傳回按鈕，并通過pop()方法來處理傳回操作。

在右面自定義操作方面，我們使用TouchableOpacity和Text元件來建立一個自定義按鈕，并通過push()方法來處理跳轉操作。

最後，我們将所有元件放入一個Navigator.NavigationBar元件中，并将其作為NavigationBar元件的根節點。