使用React Native如何設計navigationBar

在React Native中設計navigationBar通常有兩種方式：

1. 使用React Navigation庫：React Navigation是一個用于管理應用導航的庫，它提供了多種不同類型的導航組件，包括StackNavigator、TabNavigator、DrawerNavigator等。你可以通過創建一個StackNavigator來實現頂部導航欄，并在各個屏幕中設置不同的標題、按鈕等。以下是一個簡單的示例：

import { createStackNavigator } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const AppNavigator = createStackNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      title: 'Screen 1',
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      title: 'Screen 2',
    },
  },
});

export default createAppContainer(AppNavigator);

2. 自定義導航欄組件：如果你想更加靈活地設計導航欄，可以使用自定義組件來實現。你可以創建一個自定義組件作為導航欄，并在各個屏幕中引入并設置相應的樣式。以下是一個簡單的示例：

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

const CustomNavBar = ({ title }) => (
  <View style={styles.navBar}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    color: 'white',
  },
});

export default CustomNavBar;

然后在各個屏幕中引入并使用CustomNavBar組件：

import CustomNavBar from './CustomNavBar';

const Screen1 = () => (
  <View>
    <CustomNavBar title="Screen 1" />
    <Text>Screen 1 content</Text>
  </View>
);

export default Screen1;

無論是使用React Navigation庫還是自定義導航欄組件，都可以根據項目需求來選擇適合的方式來設計和實現navigationBar。