Как правильно использовать плавающую кнопку как глобально в реагировать на родной?

Question

Root-компонент - App.js

, также использующий Redux-saga.

Я хочу, чтобы после входа в систему я хотел использовать глобальную кнопку с плавающей точкой.

но есть 3 вкладки с Tab-Navigator (например, Mail / Profile / Gallery ..), и у них есть каждый Stack Navigator.

, и я хочу использовать плавающую кнопку с различными функциями на вкладках.

Например,

Mail.js -> потрясающая функция (запись)

Profile.js -> потрясающая функция (вызов, сообщение)

Gallery.js -> fab function (Share, Upload) .. вот так.

где мне разместить Fab Component для использования в глобальном масштабе ??

я использую библиотеку

https://github.com/santomegonzalo/react-native-floating-action

если есть другая хорошая библиотека, я приму, если вы, ребята, порекомендуете меня.спасибо

App.js

 export default class App extends React.Component {
   render() {

     return (
       <Provider store={store}>
        <View style={styles.container}>
         <ReduxNavigation />
       </View>
     </Provider>
  )}}

Answer 1

Вы можете использовать модуль реагировать-родная-кнопка действия для кнопки действия.если ваша кнопка действия не зависит от текущего экрана, на котором вы находитесь, то вы можете использовать ее в корневом компоненте, так как кнопка действия имеет абсолютную позицию.

вот пример кода, который вы можете использовать для справки.

export default class App extends React.Component {
    render() {
        return (
        <Provider store={store}>
            <View style={styles.container}>
                <ReduxNavigation />

                <ActionButton buttonColor="rgba(231,76,60,1)">
                <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
                    <Icon name="md-create" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
                    <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
                    <Icon name="md-done-all" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                </ActionButton>
            </View>
        </Provider>
        )
    }
}