web-dev-qa-db-ja.com

React-native <View>コンポーネントの「エレベーション」スタイルがい影を引き起こしている

エレベーションスタイル属性は、Android 5.0+のボックスシャドウを有効にします。

下のスクリーンショットに見られるさを引き起こすために、ここで「標高」で何か異常なことをしていますか？また、シャドウオフセットを定義する方法はありますか？

エミュレーターは6.0（> 5.0）を実行しているため、問題ではありません。反応ネイティブ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"
  }

Viewコンポーネントのスタイリングに関するreact-nativeのドキュメント

これが私のレンダリングメソッドです。

  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>
        }
      />
    );
  }

そしてスタイル宣言：

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

どういうわけか、この結果...

enter image description here

android-layoutreact-nativeandroid-elevation
11
Squeaky

不足している部分はbackgroundColorです。 ViewコンテナにbackgroundColor : '<anything>'スタイルを追加すると、これらの奇妙な内側の影が消えます。

34
Squeaky