web-dev-qa-db-fra.com

Le style "élévation" du composant React-native <View> provoque des ombres moches

L'attribut de style d'élévation active les ombres de boîte pour Android 5.0+.

Suis-je en train de faire quelque chose d'inhabituel avec 'élévation' ici pour provoquer la laideur qui peut être vue dans la capture d'écran ci-dessous? De plus, existe-t-il un moyen de définir un décalage d'ombre?

L'émulateur exécute 6.0 (> 5.0), ce n'est donc pas le problème. J'utilise React-Native 25.1.

  "dependencies": {
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-gcm-Android": "^0.2.0",
    "react-native-material-design": "^0.3.5",
    "react-native-system-notification": "^0.1.10",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }

Voici la documentation de react-native pour le style des composants View

Voici ma méthode de rendu:

  render() {
    return (
      <ListView
        dataSource={alertData}
        renderRow={(rowData) =>
          <View style={style.cardContainer}>
            <Text>{rowData.blah}</Text>
            <Text>{"#" + rowData.foo}</Text>
            <Text>{rowData.blah}</Text>
            <Text>{rowData.foo}</Text>
            <Text>{rowData.baz}</Text>
          </View>
        }
      />
    );
  }

Et la déclaration de style:

var style = StyleSheet.create({
  cardContainer : {
    elevation   : 3,
    flex        : 1,
    margin      : 10,
    padding     : 10,
    borderWidth : 2,
    borderColor : beeStyles.colors.lightGray
  }
});

Ce qui en quelque sorte il en résulte ...

enter image description here

android-layoutreact-nativeandroid-elevation
11
Squeaky

La pièce manquante est backgroundColor. Ajouter backgroundColor : '<anything>' le style du conteneur View fait disparaître ces ombres intérieures étranges.

34
Squeaky