방법</p> <pre><code>// using CSS filter: brightness(50%); </code></pre> <p>가 어떻게 반응 원시 이미지에서 동일한 결과를 얻을 수있는 CSS에서

Question

는 필터 재산권과 같이, 화상의 밝기를 구성하는 기본 사용될 수있는 반응의 이미지 밝기를 구성?

Answer 1

네이티브의 CSS 지원은 제한적이지만이 레포를 보시면 다음과 같습니다. https://github.com/stoffern/gl-react-instagramfilters 이것이 도움이 될 수 있습니다.

Answer 2

나는이 문제를 해결하기 위해 이것을 고안했다.

JSX : 아래의 결과를 얻기 위해

<Image style={styles.universityImage} source={require('./csun.jpg')}> 
    <View style={styles.innerFrame}> 
     <Text style={styles.universityName}>California State University, Northridge</Text> 
     <Text style={styles.universityMotto}>"CSUN Shine"</Text> 
    </View> 
</Image> 

스타일 시트 :

const styles = StyleSheet.create({ 
// View tag styling 
innerFrame: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: 'rgba(0, 0, 0, .5)', 
}, 
// Image tag styling 
universityImage: { 
    width: 300, 
    height: 250, 
    borderRadius: 5, 
}, 
universityName: { 
    color: '#fff', 
    opacity: .9, 
    fontSize: 20, 
    textAlign: 'center', 
    fontWeight: '500', 
    marginVertical: 15, 
    backgroundColor: 'transparent' 
}, 
universityMotto: { 
    color: '#fff', 
    opacity: .9, 
    textAlign: 'center', 
    backgroundColor: 'transparent' 
} 
}) 

과 중첩 <View></View><Image></Image> 내의 태그와 매우보기 태그 flex: 1 줄 그 전체 폭을 차지한다는 이 경우 <Image></Image> 태그 인 상위 태그의 높이입니다. 그런 다음 을 <View></View> 태그에 추가하여 불투명 한 모양으로 만듭니다. 그게 다야! 희망이 사람을 도와줍니다!

P. 중첩 된 <View></View> 태그 내에서 justifyContent: 'center', alignItems: 'center'으로 텍스트가 중간에 오도록했습니다