将本机阴影反应到顶部以提供 "shelf" 效果
React Native shadow to the top to give "shelf" like effect
我正在尝试使用 React Native 阴影重新创建下图。 如您所见,通过阴影,图像对象似乎位于白色架子的顶部。
这是我的尝试。但我的努力不够短,因为顶部阴影更像是黑点,而不是像上面的渐变。有什么建议吗?谢谢!
const CollectionScreen = () => {
return (
<View>
<View style={{ backgroundColor: 'black', width: 100, height: 100, position: 'absolute', top: 100, left: 100}}/>
<View style = {styles.shelf}/>
</View>
);
}
const styles = StyleSheet.create({
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: "#000",
shadowOffset: {
width: 3,
height: -5,
},
shadowOpacity: 0.25,
shadowRadius: 10,
marginTop: 3
}
})
这是我的尝试。我添加了一个浅灰色框来表示书架的顶部,并在底部的“书”下面添加了一条带阴影的线来复制仅落在书架上的阴影。
export default function App() {
return (
<View>
<View style={styles.shelf} />
<View style={styles.shelfTop} />
<View
style={{
backgroundColor: 'black',
width: 100,
height: 5,
position: 'absolute',
top: 190,
left: 100,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.50,
shadowRadius: 5,
}}
/>
<View
style={{
backgroundColor: 'black',
width: 100,
height: 100,
position: 'absolute',
top: 95,
left: 100,
}}
/>
</View>
);
}
const styles = StyleSheet.create({
shelfTop: {
width: 1242,
height: 25,
position: 'absolute',
top: 180,
backgroundColor: '#F5F5F5',
},
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.25,
shadowRadius: 20,
marginTop: 3,
},
});
我正在尝试使用 React Native 阴影重新创建下图。
这是我的尝试。但我的努力不够短,因为顶部阴影更像是黑点,而不是像上面的渐变。有什么建议吗?谢谢!
const CollectionScreen = () => {
return (
<View>
<View style={{ backgroundColor: 'black', width: 100, height: 100, position: 'absolute', top: 100, left: 100}}/>
<View style = {styles.shelf}/>
</View>
);
}
const styles = StyleSheet.create({
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: "#000",
shadowOffset: {
width: 3,
height: -5,
},
shadowOpacity: 0.25,
shadowRadius: 10,
marginTop: 3
}
})
这是我的尝试。我添加了一个浅灰色框来表示书架的顶部,并在底部的“书”下面添加了一条带阴影的线来复制仅落在书架上的阴影。
export default function App() {
return (
<View>
<View style={styles.shelf} />
<View style={styles.shelfTop} />
<View
style={{
backgroundColor: 'black',
width: 100,
height: 5,
position: 'absolute',
top: 190,
left: 100,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.50,
shadowRadius: 5,
}}
/>
<View
style={{
backgroundColor: 'black',
width: 100,
height: 100,
position: 'absolute',
top: 95,
left: 100,
}}
/>
</View>
);
}
const styles = StyleSheet.create({
shelfTop: {
width: 1242,
height: 25,
position: 'absolute',
top: 180,
backgroundColor: '#F5F5F5',
},
shelf: {
width: 1242,
height: 25,
borderRadius: 5,
backgroundColor: 'white',
position: 'absolute',
top: 200,
shadowColor: '#000',
shadowOffset: {
width: 3,
height: 5,
},
shadowOpacity: 0.25,
shadowRadius: 20,
marginTop: 3,
},
});