React Native中全局使用浮动按钮的正确方案（含Redux-saga场景）

Hey there! Let's figure out how to set up that global floating action button (FAB) with tab-specific functionality you're after. Here's a step-by-step approach tailored to your setup with Redux-saga and React Navigation:

Best Place to Put the FAB #

You’ll want to render the FAB in your root App.js component, outside of your ReduxNavigation component but inside the top-level View and Provider. This ensures it’s globally accessible, stays above all navigation screens, and can be controlled by your Redux state (like login status and active tab).

State Management Setup #

First, add two key pieces of state to your Redux store to control the FAB:

• isLoggedIn: Determines if the FAB should be visible (only show after login)
• activeTab: Tracks which tab (Mail/Profile/Gallery) is currently active, so we can switch FAB functionality

Here’s a sample reducer for this:

// reducers/uiReducer.js
const initialState = {
  isLoggedIn: false,
  activeTab: 'Mail' // Default to your first tab
};

export default function uiReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_LOGIN_STATUS':
      return { ...state, isLoggedIn: action.payload };
    case 'SET_ACTIVE_TAB':
      return { ...state, activeTab: action.payload };
    default:
      return state;
  }
}

Don’t forget to combine this reducer into your root reducer and create corresponding action creators if you haven’t already.

Step-by-Step Implementation #

1. Update Tab Screens to Track Active Tab #

In each of your tab screen components (Mail/Profile/Gallery), use useFocusEffect from React Navigation to dispatch an action when the tab comes into focus. This ensures we always have the correct active tab in Redux:

// Example for MailScreen.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { useFocusEffect } from '@react-navigation/native';

const MailScreen = () => {
  const dispatch = useDispatch();

  useFocusEffect(
    React.useCallback(() => {
      dispatch({ type: 'SET_ACTIVE_TAB', payload: 'Mail' });
      // Cleanup function (optional here)
      return () => {};
    }, [dispatch])
  );

  return <Mail />; // Your existing Mail component
};

// Repeat this pattern for ProfileScreen and GalleryScreen, changing the payload to 'Profile' and 'Gallery' respectively

2. Integrate the FAB in App.js #

Modify your App.js to include the FAB, using Redux to control its visibility and functionality. We’ll use react-native-floating-action as you specified:

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { View, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import FloatingAction from 'react-native-floating-action';
import ReduxNavigation from './ReduxNavigation'; // Your existing navigation component

// Wrap your app in a functional component to access Redux hooks
const AppWrapper = () => {
  const { isLoggedIn, activeTab } = useSelector(state => state.ui);
  const dispatch = useDispatch();

  // Dynamically generate FAB actions based on the active tab
  const getFabActions = () => {
    switch (activeTab) {
      case 'Mail':
        return [
          {
            text: 'Write',
            icon: require('./assets/write-icon.png'), // Replace with your icon
            name: 'write',
            position: 1
          }
        ];
      case 'Profile':
        return [
          {
            text: 'Call',
            icon: require('./assets/call-icon.png'),
            name: 'call',
            position: 1
          },
          {
            text: 'Message',
            icon: require('./assets/message-icon.png'),
            name: 'message',
            position: 2
          }
        ];
      case 'Gallery':
        return [
          {
            text: 'Share',
            icon: require('./assets/share-icon.png'),
            name: 'share',
            position: 1
          },
          {
            text: 'Upload',
            icon: require('./assets/upload-icon.png'),
            name: 'upload',
            position: 2
          }
        ];
      default:
        return [];
    }
  };

  // Handle FAB button presses - integrate with Redux-saga here
  const handleFabPress = (actionName) => {
    switch (actionName) {
      case 'write':
        // Dispatch a saga action or navigate to write mail screen
        dispatch({ type: 'INITIATE_WRITE_MAIL' });
        break;
      case 'call':
        dispatch({ type: 'INITIATE_CALL' });
        break;
      case 'message':
        dispatch({ type: 'SEND_MESSAGE_REQUEST' });
        break;
      case 'share':
        dispatch({ type: 'SHARE_GALLERY_CONTENT' });
        break;
      case 'upload':
        dispatch({ type: 'UPLOAD_MEDIA_REQUEST' });
        break;
      default:
        break;
    }
  };

  return (
    <View style={styles.container}>
      <ReduxNavigation />
      {/* Only show FAB if user is logged in */}
      {isLoggedIn && (
        <FloatingAction
          actions={getFabActions()}
          onPressItem={(action) => handleFabPress(action.name)}
          style={{ zIndex: 1000 }} // Ensure FAB stays above all other components
        />
      )}
    </View>
  );
};

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWrapper />
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Recommended Alternative Libraries #

If you’re open to trying other libraries, @gorhom/fab is a modern, well-maintained option with smooth animations and flexible customization. It requires setting up react-native-reanimated and react-native-gesture-handler, but offers more control over FAB behavior (like extended labels, custom transitions, and bottom sheet integration).

A quick example of using it:

import { FAB } from '@gorhom/fab';
import { View, Text } from 'react-native';

// In AppWrapper, replace the FloatingAction component with:
{isLoggedIn && (
  <FAB
    visible={true}
    icon={<Text>{activeTab === 'Mail' ? '✍️' : activeTab === 'Profile' ? '📞' : '📤'}</Text>}
    onPress={() => {
      // Handle main FAB press (e.g., expand a menu of actions)
    }}
    style={{ zIndex: 1000 }}
  />
)}

Key Notes #

• Z-Index: Always set a high zIndex on your FAB to prevent it from being covered by navigation headers or screen content.
• Focus Effect: Using useFocusEffect ensures the active tab state updates even if the tab screen is cached by React Navigation.
• Redux-Saga Integration: All FAB actions can dispatch saga actions to handle async logic (like API calls, navigation, or state updates) — just map the button presses to your existing saga workflows.

内容的提问来源于stack exchange，提问作者jehee choi