极客教程如何在React Native中创建带有盒阴影的卡片
在本文中，我们将使用React Native创建一个具有盒阴影效果的居中卡片组件，并了解如何使用Expo cli。
卡片用于以吸引人的方式展示信息。通过添加盒阴影效果，我们将为卡片增加深度，并使其在界面中突出显示。首先，安装Node.js，允许您在浏览器之外运行JavaScript代码以用于开发目的。
Expo通过提供统一的代码库，简化了跨平台应用程序开发，可以在iOS、Android和Web上使用。借助其工具和服务，开发人员可以轻松创建高质量的应用程序。
先决条件
- React Native入门
- React Native组件入门
- Expo CLI
语法
box-shadow: [h offset] [v offset] [blur radius]
[optional spread] [any color];
创建React Native应用程序的步骤
步骤1： 使用以下命令创建React Native应用程序
npx create-expo-app card-with-boxshadow
步骤2： 创建项目文件夹后，例如 card-with-boxshadow，请使用以下命令导航到它：
cd card-with-boxshadow
项目结构
示例: 在这个示例中，我们将看到如何在React Native中创建阴影。
- App.js
import React from 'react';
import { View, Text, StyleSheet, Dimensions }
from 'react-native';
const App = () => {
return (
<View style={styles.container}>
{/* Card */}
<View style={styles.card}>
{/* Header */}
<View style={styles.header}>
<Text style={styles.title}>
Welcome To Geeksforgeeks!!
</Text>
<Text style={styles.subtitle}>
React Native Card
</Text>
</View>
{/* Content */}
<View style={styles.content}>
<Text style={styles.text}>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</Text>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
card: {
backgroundColor: 'white',
borderRadius: 15,
padding: 16,
shadowColor: 'black',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.3,
shadowRadius: 6,
elevation: 14,
width: 350,
height: 350,
justifyContent: 'center',
alignItems: 'center',
},
header: {
marginBottom: 16,
alignItems: 'center',
},
title: {
fontSize: 30,
fontWeight: 'bold',
color: 'green',
},
subtitle: {
fontSize: 24,
color: '#333',
marginTop: 10,
},
content: {
alignItems: 'center',
},
text: {
fontSize: 17,
color: '#444444',
textAlign: 'center',
},
});
export default App;
步骤4： 要运行React Native应用程序，请打开终端并输入下面列出的命令。
npx expo start
- 在Android上运行：
npx react-native run-android
- 在 iOS 上运行：
npx react-native run-ios
输出 :
示例2： 此示例与前一个示例类似，唯一的区别是我们添加了一个按钮，使用onPress()函数显示具有阴影的卡片。
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity }
from 'react-native';
const App = () => {
const [showCard, setShowCard] = useState(false);
const handleButtonClick = () => {
setShowCard(!showCard);
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={handleButtonClick}
style={styles.button}>
<Text style={styles.buttonText}>
Box Shadow
</Text>
</TouchableOpacity>
{showCard && (
<View style={styles.cardContainer}>
<Text style={styles.heading}>
Welcome To Geeksforgeeks!!
</Text>
<Text style={styles.paragraph}>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</Text>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F5F5F5',
},
button: {
backgroundColor: 'green',
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 8,
marginBottom: 16,
},
buttonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: 'bold',
},
cardContainer: {
backgroundColor: '#FFFFFF',
borderRadius: 8,
padding: 16,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 10, // Required for Android
width: 350,
height: 350,
},
heading: {
fontSize: 25,
fontWeight: 'bold',
marginBottom: 8,
color: 'green',
alignItems: 'center',
},
paragraph: {
fontSize: 17,
lineHeight: 24,
},
});
export default App;
运行步骤： 要运行React Native应用程序，请打开终端并输入下面列出的命令。
npx expo start
- 在Android上运行：
npx react-native run-android
- 在Ios上运行：
npx react-native run-ios
输出
