javascript - React Native - 模态触发按钮始终可见

Question

我正在尝试在使用 Modal 部署多个项目的点击栏上制作一个操作按钮。我遇到的问题是我希望操作按钮保持可见，以便用户可以在模式之间切换。

在这里您可以看到可见的操作按钮

一旦模态被激活，显然会消失。

试过：

• 在模式上制作另一个按钮，但在不同的设备尺寸上，按钮会移动。

代码

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-native

Answer 1

您可以尝试下面的代码，您也应该在模态框内添加操作按钮，以便在模态框内显示。

export default ActionButton = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setModalVisible(true);
        }}
        buttonStyle={styles.buttonStyle}
        icon={
          <Entypo
            name={"plus"}
            fill={Colors.tintColor}
            color={Colors.iconColor}
          />
        }
      />
      <View style={styles.container}>
        <Modal
          backdropOpacity={0.8}
          isVisible={modalVisible}
          onBackdropPress={() => setModalVisible(false)}
          style={styles.contentView}
        >
          {/*close button */}

          <View style={styles.content}>
            <View
              style={{
                flexDirection: "row",
                flex: 1,
                justifyContent: "space-around",
              }}
            >
              <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
                <AntDesign name="search1" size={20} color="#fff" />
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.8}
                style={[styles.buttonItem, { bottom: 130 }]}
              >
                <MaterialIcons name="fitness-center" size={20} color="#fff" />
              </TouchableOpacity>
              <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
                <AntDesign name="search1" size={20} color="#fff" />
              </TouchableOpacity>
              <Button
                onPress={() => {
                  setModalVisible(true);
                }}
                buttonStyle={styles.buttonStyle}
                icon={
                  <Entypo
                    name={"plus"}
                    fill={Colors.tintColor}
                    color={Colors.iconColor}
                  />
                }
              />
            </View>
          </View>
        </Modal>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  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,
    backgroundColor: Colors.tintColor,
    borderRadius: 100,
  },
  buttonStyle2: {
    height: 50,
    width: 50,
    backgroundColor: Colors.tintColor,
    borderRadius: 100,
  },

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