React Native: как создать кнопку в заголовке, которая перекрывает содержимое экрана, которое работает на Android и iOs

Question

Я пытаюсь добиться этого макета *. И я это сделал, но, к сожалению, работает только на iOs устройствах. На устройствах Android, когда я нажимаю кнопку в зоне, где она перекрывает часть экрана, которая не находится в заголовке, не работает, даже если она отображается. Кроме того, в Android это свойство borderRightColor: 'не работает должным образом. Мне не удалось выяснить, являются ли это известными ошибками фреймворка, поддерживающего реакцию, или что-то не так с моим кодом. Что я могу сделать, чтобы создать этот макет на обеих платформах? Я создал эту закуску со своим кодом по этой проблеме: https://snack.expo.io/@ivy.mihai / header-with-button-overlaying-the-screen

• * Желаемое макет

Как выглядит то, что я сделал на Android

Как выглядит то, что я сделал iOs

Answer 1

• Поместите вид полукруга перед кнопкой и избегайте zIndex.

• Нижняя часть кнопки находится вне родительского представления, поэтому, когда вы коснетесь этого часть кнопки не работает. Единственный обходной путь, который я смог найти в Интернете, - это использовать TouchableWithoutFeedback (или любой Touchable) из библиотеки «response-native-gesture-handler». Этот Touchable рендерится немного иначе, поэтому мне пришлось изменить несколько вещей

Затем я бы добавил несколько советов к go чуть дальше:

• Избегайте TouchableWithoutFeedback для кнопки, пользователю требуется обратная связь. Предпочитайте TouchableOpacity для ios и TouchableNativeFeedback для android.

• Избегайте круглых значков для кнопок. Предпочитайте значок в виде круга, фон этого вида будет использоваться для эффекта пульсации на android

Я уточнил таблицу стилей и дает следующий код:

import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Dimensions,
  Platform,
  TouchableNativeFeedback as RNTouchableNativeFeedback,
} from 'react-native'
import {
  TouchableWithoutFeedback,
  TouchableOpacity,
  TouchableNativeFeedback,
} from 'react-native-gesture-handler'
import { Ionicons } from '@expo/vector-icons'

import { Button } from './src/components/BergamotUI'

const windowWidth = Dimensions.get('window').width
export default class App extends Component {
  render() {
    const color1 = 'red'
    const color2 = 'yellow'

    const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableNativeFeedback })

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.buttonContainer}>
            <View style={styles.semiCircle} />
            <View style={styles.button}>
              <Touchable onPress={() => console.log('I am doing something')} useForeground={true}>
                <View style={styles.iconWrapper}>
                  <Ionicons name="ios-add" color={'white'} size={34} />
                </View>
              </Touchable>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  button: {
    overflow: 'hidden',
    borderRadius: 50,
  },
  iconWrapper: {
    backgroundColor: 'grey',
    width: 50,
    height: 50,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
    paddingLeft: Platform.select({ ios: 2, android: 0 }),
    overflow: 'hidden',
  },
  header: {
    width: windowWidth,
    height: 108,
    borderWidth: 1,
    borderColor: 'red',
    alignItems: 'flex-end',
    justifyContent: 'flex-end',
    marginTop: Platform.OS === 'ios' ? Dimensions.StatusBarHeight : 0,
  },
  buttonContainer: {
    position: 'absolute',
    right: 10,
    width: 80,
    height: 40,
    borderColor: 'transparent',
    flex: 1,
    alignItems: 'center',
    paddingTop: 15,
    //backgroundColor: 'blue',
  },
  semiCircle: {
    position: 'absolute',
    bottom: 0,
    backgroundColor: 'transparent',
    borderColor: 'red',
    borderWidth: 1,
    width: 80,
    height: 40,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    borderBottomWidth: 1,
    borderBottomColor: 'white',
  },
  buttonContainer2: {
    borderRadius: 50,
    height: 50,
    overflow: 'hidden',
  },
  button2: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    height: 50,
    paddingHorizontal: 5,
  },
})

Редактировать 1: Добавить точку о Touchable вне его родителей, добавить TouchableNativeFeedback и TouchableOpacity и переписать некоторый стиль