我正在尝试实现如下图所示的卡片,我已经实现了如下代码的单色颜色代码,
<View style={{
width: (window.width) * 0.4,
height: (window.height) * 0.15,
backgroundColor:"#FFFFFF",
elevation: 1.5,
justifyContent:'center',
borderRadius: (window.width) * 0.03,
}}>
</View>
谁能帮我用两种音色实现像上面这样的卡片?
最佳答案
工作应用:Expo Link
应用输出:
更新:
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
import { AntDesign } from '@expo/vector-icons';
const window = Dimensions.get('window');
export default function App() {
return (
<View style={styles.container}>
<View style={styles.orangeBox}>
<View
style={[
styles.orangeBox,
{
zIndex: 100,
backgroundColor: null,
justifyContent: 'space-between',
},
]}>
<View
style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<AntDesign name="youtube" size={24} color="red" />
<View>
<Text style={styles.text}>YouTube</Text>
<Text style={styles.text}>Offer</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
padding: 5,
}}>
<View style={{ justifyContent: 'space-between' }}>
<View />
<Text style={[styles.text, { color: 'white' }]}>Free</Text>
</View>
<View style={{ marginTop: 2 }}>
<Text style={[styles.text, { color: 'white', fontSize: 12 }]}>
100 Mb
</Text>
<Text style={[styles.text, { color: 'white', fontSize: 12 }]}>
7 Days
</Text>
</View>
</View>
</View>
<View style={styles.whiteBox}></View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'grey',
padding: 10,
},
orangeBox: {
width: window.width * 0.4,
height: window.height * 0.15,
backgroundColor: '#FF6600',
elevation: 1.5,
borderRadius: window.width * 0.03,
overflow: 'hidden',
},
whiteBox: {
position: 'absolute',
width: window.width * 0.6,
height: window.height * 0.4,
backgroundColor: 'white',
elevation: 1.5,
bottom: 25,
right: -20,
borderRadius: window.width * 0.5,
},
text: {
fontWeight: 600,
fontSize: 13,
},
});
只有卡片设计的旧解决方案:
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const window = Dimensions.get('window');
export default function App() {
return (
<View style={styles.container}>
<View style={styles.orangeBox}>
<View style={styles.whiteBox}></View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'grey',
padding: 10,
},
orangeBox: {
width: window.width * 0.4,
height: window.height * 0.15,
backgroundColor: '#FF6600',
elevation: 1.5,
borderRadius: window.width * 0.03,
overflow: 'hidden',
},
whiteBox: {
position: 'absolute',
width: window.width * 0.6,
height: window.height * 0.4,
backgroundColor: 'white',
elevation: 1.5,
bottom: 22,
right: -20,
borderRadius: window.width * 0.5,
},
});
关于react-native - 双色卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65527925/