섀도 컬러를 반응형 안드로이드로 설정할 수 없음

섀도 컬러를 반응형 안드로이드로 설정할 수 없음

환경

• 환경:

  • OS: macOS High Sierra 10.13.1
  • 노드: 8.9.1
  • 실: 0.17.10
  • npm: 5.6.0
  • 워치맨: 4.7.0
  • Xcode: Xcode 9.2 빌드 버전 9C40b
  • Android Studio: 2.3 AI-162.4069837

• 패키지: (설치됨)

  • 반응: 16.0.0
  • 반응-반응: 0.51.0

재생성 단계

이 코드 실행

import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
class App extends Component {
  render() {
    return (<View style={styles.container}>
      <View>
        <TouchableOpacity style={[styles.boxShadow, shadow]}>
          <Text style={styles.text}>LOGIN</Text>
        </TouchableOpacity>
      </View>
    </View>);
  }
}
const shadow = {
  shadowColor: '#30C1DD',
  shadowRadius: 10,
  shadowOpacity: 0.6,
  elevation: 8,
  shadowOffset: {
    width: 0,
    height: 4
  }
}
const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxShadow: {
    width: 200,
    height: 50,
    borderRadius: 10,
    backgroundColor: '#ed7171',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#ffffff'
  }
};
export default App;

예상 동작

Android에서 이 그림자처럼 이룰 수 있는 방법이 있을까?

iOS에서 반응 네이티브만 지원하는 섀도 소품

• 색상을 바꿀 필요가 있다.
• 시험을 마친elevation그러나 기본 회색 색상은 변경할 수 없음
• 와 함께 ios로 성취할 수 있는shadowColoriOS만 지원하므로 안드로이드에서는 아니지만 소품

실제 동작

샘플 코드 및 미리 보기를 참조하십시오.

• 안드로이드에게도 효과가 있어야 한다.
• 그림자 색은 항상 회색이지만, 나는 바꾸려고 노력했다.

재현 가능한 데모

이것은 회색 색상으로만 표고가 있는 그림자만 얻을 수 있는 샘플 스냅샷이다. [기본값]

지금 현재 섀도우를 추가하는 유일한 방법은

elevation :value

안드로이드 버전 >5용

또는 사용하다

https://github.com/879479119/react-native-shadow

타사 플러그인이지만 지금까지 RGB를 지원하지 않지만 색상을 지원한다.

안드로이드 스타일리스트에는 "그림자" 속성이 없기 때문에 구성요소에 그림자 효과를 더하려면 PNG-24 사진을 패치해야 하는데 너무 화려하지 않아 이 문제를 해결할 SVG 그림자 플러그인이 나온다.iOS에 네이티브 섀도우를 사용할 것을 제안한다.

**

LinearGradient 트릭을 사용할 수 있음

**

https://hashnode.com/post/is-there-any-good-alternative-to-elevations-for-android-in-react-native-cjc600tva00pfuzwup50xv01z

업데이트됨:

이제 react 기본 0.64로 섀도 색상을 추가할 수 있음

RN Android에 그림자를 구현하려면 표고를 사용하십시오.입면 받침대 #27 추가

<View elevation={5}> </View>

참조URL: https://stackoverflow.com/questions/47843169/not-able-to-set-shadowcolor-in-react-native-android