javascript - React Native - React Navigation TapBar 操作按钮保持可见 [Myfitnesspal 看起来很像]

Question

我正在努力实现操作按钮始终保持可见。一旦用户点击它，就会出现一个模式，当然，操作按钮会留在模式后面。我试过了：

• 使用门户
• 在模态框内创建另一个按钮（独立于原始按钮），但这会根据设备导致问题，并且用户可以看到从一个按钮到另一个按钮的转换。
• 尝试了这个预制的，但似乎无法正确地将其放在标签栏上：actionbutton

我的方法

我的代码

import React, {useState} from 'react';
import {
  Dimensions,
  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';

const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
  ? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
  : console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);

Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();

const TabBarAdvancedButton = ({bgColor, ...props}) => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <View style={styles.container} pointerEvents="box-none">
        <TabBg color={'white'} style={styles.background} />
        <TouchableOpacity
          style={styles.button}
          onPress={props.onPress}
          activeOpacity={0.9}
          onPress={() => setModalVisible(true)}>
          <Entypo name="plus" style={styles.buttonIcon} />
        </TouchableOpacity>
      </View>
      <Modal
        backdropOpacity={0.8}
        animationIn="fadeIn"
        animationOut="fadeOut"
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        style={styles.contentView}>
        {/*close button */}

        <View style={styles.content}>
          <TouchableOpacity
            style={{
              position: 'absolute',
              backgroundColor: 'red',
              alignSelf: 'center',
            }}>
            <AntDesign name="search1" size={20} color="#fff" />
          </TouchableOpacity>
          <View
            style={{
              flexDirection: 'row',
              flex: 1,
              justifyContent: 'space-around',
              marginBottom: height * 0.02,
            }}>
            <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
              <AntDesign name="search1" size={20} color="#fff" />
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
              <MaterialIcons name="fitness-center" size={20} color="#fff" />
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
              <AntDesign name="search1" size={20} color="#fff" />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
};

export default TabBarAdvancedButton;

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 75,
    alignItems: 'center',
  },
  background: {
    position: 'absolute',
    top: 0,
  },
  button: {
    top: -22.5,
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
    height: 50,
    borderRadius: 27,
    backgroundColor: colors.PRIMARY_COLOR_DARK,
  },
  buttonIcon: {
    fontSize: 16,
    color: '#F6F7EB',
  },
  content: {
    backgroundColor: 'transparent',
    padding: 60,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderTopRightRadius: 17,
    borderTopLeftRadius: 17,
    flexDirection: 'row',
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
  contentView: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  buttonStyle: {
    height: 50,
    width: 50,
    borderRadius: 100,
  },
  buttonStyle2: {
    height: 50,
    width: 50,
    borderRadius: 100,
  },

  buttonItem: {
    height: 56,
    width: 56,
    borderRadius: 100,
    borderColor: '#468CFF',
    borderWidth: 3.5,
    backgroundColor: '#366ABF',
    bottom: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

标签： javascriptreactjsreact-nativereact-navigation