Wie kann ich Höhenschatten nur auf der Unterseite einstellen, um nativ zu reagieren?

Lesezeit: 2 Minuten

Benutzeravatar von tinmarfrutos
Tinmarfrutos

Ich versuche, einen Schatten am unteren Rand einer Ansicht hinzuzufügen, aber ich weiß nicht, wie das auf Android geht. Mit elevation es legte auch einen Schatten auf die Oberseite. Gibt es eine Möglichkeit wie bei iOS?

Hier ist mein Code:

export function makeElevation(elevation) {
const iosShadowElevation = {
    shadowOpacity: 0.0015 * elevation + 0.18,
    shadowRadius: 0.5 * elevation,
    shadowOffset: {
        height: 0.6 * elevation,
    },
};
const androidShadowElevation = {
    elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;

}

links: iOS (erwartet)

rechts: Android

BEARBEITEN: Die einzige “falsche” Lösung, die ich gefunden habe, ist die Verwendung react-native-linear-gradient stattdessen einen benutzerdefinierten Schatten zu erstellen.

IOS/ANDROID

Benutzeravatar von Abdelrhman Elmahdy
Abdelrahman Elmahdy

Sie können verwenden overflow: 'hidden' um das gewünschte Ergebnis zu erzielen, ohne eine Bibliothek installieren zu müssen.
Wickeln Sie die Ansicht in eine übergeordnete Ansicht ein und setzen Sie den Überlauf des übergeordneten Elements auf ausgeblendet und wenden Sie eine Polsterung nur auf der Seite an, auf der Ihr Schatten wie folgt erscheinen soll:

  <View style={{ overflow: 'hidden', paddingBottom: 5 }}>
    <View
      style={{
        backgroundColor: '#fff',
        width: 300,
        height: 60,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  0.4,
        shadowRadius: 3,
        elevation: 5,
      }} 
    />
  </View>

Ergebnis: Ergebnis

Hier ist eine benutzerdefinierte Komponente, die Sie verwenden können:

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) => (
  <View style={[ styles.container, style ]}>
    { children }
  </View>
);

const styles = StyleSheet.create({
  container:{
    overflow: 'hidden',
    paddingBottom: 5,
  }
});

SingleSidedShadowBox.propTypes = {
  children: PropTypes.element,
  style: ViewPropTypes.style,
};

export default SingleSidedShadowBox;

Beispiel:

<SingleSidedShadowBox style={{width: '90%', height: 40}}>
  <View style={{
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 5,
  }} />
</SingleSidedShadowBox>

Sie können die Polsterung je nach Schatten anpassen

  • bester Patch, den ich für dieses Problem gesehen habe

    – Nikolaus Silva

    22. Dezember 2020 um 14:45 Uhr

Leider wird dies von RN nicht standardmäßig unterstützt, siehe Blow-Link
https://ethercreative.github.io/react-native-shadow-generator/

aber Sie können npm-Pakete wie verwenden Das

  • react-native-shadow ist nicht perfekt, aber es scheint zu funktionieren. Danke 🙂 Es wäre toll, wenn React-Native damit nativ umgehen würde

    – Tinmarfrutos

    17. Oktober 2019 um 7:54 Uhr


Die obigen Antworten sind sehr hilfreich, aber die Problemumgehung, die für mich am besten funktioniert hat, besteht darin, beide zu umschließen. 1-Die Komponente, die den Schatten fallen lässt Und 2-Die Komponente, auf die der Schatten fällt in einer Komponente mit der Stilregel overflow: "hidden"

Beispiel:

function SomeScreen (){
  return (
    <View style={{overflow: "hidden"}}/*Top shadow is hidden*/>
      <NavBar style={styles.shadow}/*The component dropping a shadow*/ /> 
      <ProductList /*The component under the shadow*/ />
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "black",
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 6,
    shadowOpacity: 0.2,
    elevation: 3,
  }
});

Fügen Sie dies einfach an den Hauptansichtscontainer an:

const styles = StyleSheet.create({
      container: {
        ...Platform.select({
          ios: {
            shadowColor: '#000',
            shadowOffset: {width: 1, height: 3},
            shadowOpacity: 0.4,
          },
          android: {
            elevation: 4,
          },
        }),
      },
    });

1443020cookie-checkWie kann ich Höhenschatten nur auf der Unterseite einstellen, um nativ zu reagieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy