Question

我在屏幕上有一个FlatList和FAB。 FAB定位为绝对。每当我尝试单击FAB时，就会单击fab后面的FlatList项目。

当我删除绝对FAB可用的位置时，我尝试在View内包装可触摸的内容，并尝试更改视图顺序，但没有任何效果

注意：它可以在iOS上运行，但不能在Android上运行

import React from "react";
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Platform,
  Image,
  TouchableOpacity
} from "react-native";
import RF from "react-native-responsive-fontsize";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from "react-native-responsive-screen";

import AddIcon from "../../libs/fabActions/AddIcon";

export default class TemplateScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
    };
  }

  keyExtractor = (item, index) => {
    return index.toString();
  };

  renderItem = ({ item, index }) => {
    const { navigate } = this.props.navigation;

    return (
      <TouchableOpacity>
        <View style={styles.item}>
          <Text style={styles.name}>Christmas Template</Text>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={styles.list}
          data={this.state.data}
          extraData={this.state}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />

          <TouchableOpacity>
            <View style={styles.addButton}>
              <AddIcon width={wp(4)} height={wp(4)} />
            </View>
          </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f0f2ff"
  },
  item: {
    backgroundColor: "#ffffff",
    marginHorizontal: "4%",
    marginVertical: "1.2%",
    paddingHorizontal: "4.5%",
    paddingVertical: "5%",
    ...Platform.select({
      ios: {
        shadowColor: "rgba(71, 75, 165, 0.1)",
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowRadius: 9.7,
        shadowOpacity: 1
      },
      android: {
        elevation: 1
      }
    })
  },
  name: {
    fontSize: RF(2.3),
    color: "#474ba5"
  },
  addButton: {
    position: "absolute",
    bottom: 20,
    right: 30,
    width: 46,
    height: 46,
    backgroundColor: "#ffffff",
    borderRadius: 46,
    alignContent: "center",
    justifyContent: "center",
    zIndex: 10,
    ...Platform.select({
      ios: {
        shadowColor: "rgba(71, 75, 165, 0.1)",
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowRadius: 9.7,
        shadowOpacity: 1
      },
      android: {
        elevation: 4
      }
    })
  },
  list: {
    paddingBottom: hp(8),
    paddingTop: "2%"
  }
});

Answer 1

要理解的事情是在Android中，如果绝对定位的按钮位于其父代之外，则它不会捕获事件。您可以通过制作一个正方形视图来验证该假设，并以这样的方式浮动按钮：按钮的一半在该视图之外，另一半在视图内部。当您单击父视图内部的一半时，事件将触发；但是如果您在父视图的外部单击一半，将无法使用。

因此，得出的结论是始终确保按钮在父视图内。对于浮动操作按钮，如果您希望它起作用，则需要将其挂接到屏幕的根视图，换句话说，它应该是屏幕根视图的直接子级。确保你会成为最后一个孩子也不会被隐藏。这样，您将确保它始终在父视图中。要查看的另一件事是，如果您在android studio中创建一个项目以说要制作本机应用程序，并且选择带有浮动操作按钮的选项，那么您会看到FAB是ConstraintLayout容器的直接子代，它可以验证我的身份在这里说。

在问题中提供的情况下，需要完全定位而不是内部视图的TouchableOpacity

反应本机浮动动作按钮可触摸不起作用

1 个答案: