React Native的導航欄自定義

在React Native中，你可以使用react-navigation庫來創(chuàng)建自定義的導航欄。以下是一個簡單的示例，展示了如何在React Native應用中創(chuàng)建一個自定義的導航欄。

首先，確保你已經(jīng)安裝了react-navigation及其相關依賴：

npm install @react-navigation/native @react-navigation/stack

然后，你可以創(chuàng)建一個自定義的導航欄組件。例如，創(chuàng)建一個名為CustomNavbar.js的文件，并添加以下代碼：

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

const CustomNavbar = ({ title, onPress }) => {
  return (
    <View style={styles.navbar}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.button} onPress={onPress}>
        {' '}
        Menu
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  navbar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#f4511e',
  },
  title: {
    color: '#fff',
    fontSize: 18,
  },
  button: {
    color: '#fff',
    fontSize: 16,
  },
});

export default CustomNavbar;

接下來，在你的主組件（例如App.js）中，你可以使用react-navigation庫來設置導航欄，并將自定義的導航欄組件添加到其中：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CustomNavbar from './CustomNavbar';

const Stack = createStackNavigator();

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: () => (
              <CustomNavbar title="My App" onPress={() => alert('Menu pressed!')} />
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

在這個示例中，我們創(chuàng)建了一個名為CustomNavbar的自定義導航欄組件，它包含一個標題和一個菜單按鈕。然后，我們在App.js中使用react-navigation庫將這個自定義導航欄添加到了堆棧導航器中。

現(xiàn)在，當你運行你的React Native應用時，你應該可以看到一個帶有自定義導航欄的頁面。點擊菜單按鈕會彈出一個警告框，提示“Menu pressed!”。