Кнопка действия React Native Floating не работает

У меня на экране FlatList и FAB. FAB позиционируется абсолютно. всякий раз, когда я пытаюсь нажать на FAB, щелкает элемент FlatList за fab.

Когда я удаляю абсолютную позицию, FAB работает, я пытался обернуть touchable внутри 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%"
  }
});

react-native react-native-flatlist touchableopacity
person Tejas    schedule 30.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Итак, вывод - всегда проверять, находится ли кнопка внутри родительского представления. в случае кнопки с плавающим действием, если вы хотите, чтобы она работала, вам нужно подключить ее к корневому представлению экрана, или, другими словами, он должен быть прямым дочерним элементом корневого представления экрана. Конечно, вы сделаете это последним ребенком, чтобы его не спрятали. таким образом вы будете уверены, что он всегда находится внутри родительского представления. Еще одна вещь, на которую нужно обратить внимание, - это если вы создаете проект в студии Android, скажем, чтобы создать собственное приложение, и выберите вариант с плавающей кнопкой действия, вы увидите, что FAB является прямым дочерним элементом контейнера ConstraintLayout, который проверяет, что я говоря здесь.

В случае, указанном в вопросе, TouchableOpacity, который нужно позиционировать абсолютно, а не вид внутри него

person Abdellah El Mennani    schedule 01.05.2020