React Native Плавающая кнопка действия Touchable не работает - PullRequest
Новая
       24

React Native Плавающая кнопка действия Touchable не работает

1 голос
/ 30 апреля 2019

У меня есть 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%"
  }
});
...