1

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

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

附上截图

注意：它适用于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%"
  }
});
4

1 回答 1

0

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

所以结论是始终确保按钮位于父视图内。在浮动操作按钮的情况下，如果您希望它工作，您需要将其连接到屏幕的根视图，或者换句话说，它应该是屏幕根视图的直接子视图。当然，你也会让它成为最后一个不被隐藏的孩子。这样你就可以确保它总是在父视图中。另一件需要注意的事情是，如果你在 android studio 中创建一个项目说要制作原生应用程序，并且你选择带有浮动操作按钮的选项，你会看到 FAB 是 ConstraintLayout 容器的直接子项，它验证了我是什么在这里说。

在问题中提供的情况下，需要定位的 TouchableOpacity 绝对不是其中的视图

于 2020-05-01T17:55:19.497 回答