React Native 卡片样式
React Native Card Styling
如何拉伸卡片的内容使其具有 100% 的宽度。例如我希望红色段落水平接触边缘,这样左右就不会出现黄色space。换句话说,我想从 cad 内容中删除填充,这样就不会显示黄色。
这是我的代码:
import React,{Component} from 'react';
import { Searchbar, Button, Card, Paragraph } from 'react-native-paper';
import { StyleSheet, SafeAreaView, View, ActivityIndicator, StatusBar, TextInput, Text } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
render()
{
const styles = StyleSheet.create({
container: {
flex: 1,
},
menuContainer:{
// backgroundColor: 'orange',
borderRadius: 10,
margin: 10,
marginTop: 2,
},
menuItemHeader:{
backgroundColor: '#D9B611',
borderRadius: 10,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
},
menuItemHeaderText:{
marginTop:5,
fontSize:17,
fontWeight:'bold',
color:'#fff'
},
menuItemHeaderSubText:{
marginTop:5,
fontSize:15,
color:'#fff'
},
menuItemBody:{
backgroundColor: 'yellow',
borderWidth:1,
borderBottomRightRadius: 5,
borderBottomLeftRadius: 5,
borderColor: 'gray',
borderTopWidth: 0,
alignSelf: 'stretch',
},
menuItemBodyText:{
marginTop:5,
fontSize:15,
},
description_input: {
height: 150,
backgroundColor: 'red',
alignItems: this.multiline ? 'flex-start' : 'center',
},
action_buttons_positioning: {
alignSelf: 'flex-end',
backgroundColor: 'green',
},
action_buttons: {
width: 50,
elevation: 8,
// backgroundColor: "#D9B611",
backgroundColor: "gray",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
paddingHorizontal: 5,
paddingVertical: 2,
},
action_buttons_text: {
color: '#fff',
fontSize: 16,
padding: 5
},
bottomLogoContainer:{
alignSelf: "center",
justifyContent: 'center',
alignItems: 'center',
textAlign:"center",
height: 100,
marginBottom: 20,
zIndex: 0
},
bottomLogoImage:{
width: 150,
height: 150,
resizeMode: 'contain',
}
});
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
)
}
return (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
keyExtractor = {(item, index) => index.toString()}
renderItem={({ item }) => (
<Card style={styles.menuContainer}>
{/* <Card.Cover source={{ uri: item.cover_img }} /> */}
<Card.Title title={item.title.toString()} subtitle={item.title.toString()} style={styles.menuItemHeader}/>
<Card.Content style={styles.menuItemBody}>
<Paragraph style = {styles.description_input}>
<View>
<TextInput
underlineColorAndroid = "transparent"
placeholderTextColor = "gray"
autoCapitalize = "none"
multiline={true}
// numberOfLines={4}
placeholder = "Job description"
// onBlur={()=>this.lastNameValidation()}
// onChangeText={last_name => this.setState({ last_name })}
/>
</View>
</Paragraph>
<Paragraph style={styles.action_buttons_positioning}>
<TouchableOpacity onPress={() => alert('Clicked')}>
<View style={styles.action_buttons}>
<Text style={styles.action_buttons_text}>Edit</Text>
</View>
</TouchableOpacity>
</Paragraph>
</Card.Content>
</Card>
)
}
/>
{/* <View style={styles.bottomLogoContainer}>
<Image
style={styles.bottomLogoImage}
source={require('../../../../src/assets/img/logo_120.png')}
/>
</View> */}
</SafeAreaView>
</>
)
}
}
您可以在 menuItemBody
样式对象中添加 paddingHorizontal: 0
,即应用于 Card.Content
组件的样式。
The CardContent
component apparently sets 16
horizontal padding by default.
如何拉伸卡片的内容使其具有 100% 的宽度。例如我希望红色段落水平接触边缘,这样左右就不会出现黄色space。换句话说,我想从 cad 内容中删除填充,这样就不会显示黄色。
这是我的代码:
import React,{Component} from 'react';
import { Searchbar, Button, Card, Paragraph } from 'react-native-paper';
import { StyleSheet, SafeAreaView, View, ActivityIndicator, StatusBar, TextInput, Text } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
render()
{
const styles = StyleSheet.create({
container: {
flex: 1,
},
menuContainer:{
// backgroundColor: 'orange',
borderRadius: 10,
margin: 10,
marginTop: 2,
},
menuItemHeader:{
backgroundColor: '#D9B611',
borderRadius: 10,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
},
menuItemHeaderText:{
marginTop:5,
fontSize:17,
fontWeight:'bold',
color:'#fff'
},
menuItemHeaderSubText:{
marginTop:5,
fontSize:15,
color:'#fff'
},
menuItemBody:{
backgroundColor: 'yellow',
borderWidth:1,
borderBottomRightRadius: 5,
borderBottomLeftRadius: 5,
borderColor: 'gray',
borderTopWidth: 0,
alignSelf: 'stretch',
},
menuItemBodyText:{
marginTop:5,
fontSize:15,
},
description_input: {
height: 150,
backgroundColor: 'red',
alignItems: this.multiline ? 'flex-start' : 'center',
},
action_buttons_positioning: {
alignSelf: 'flex-end',
backgroundColor: 'green',
},
action_buttons: {
width: 50,
elevation: 8,
// backgroundColor: "#D9B611",
backgroundColor: "gray",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
paddingHorizontal: 5,
paddingVertical: 2,
},
action_buttons_text: {
color: '#fff',
fontSize: 16,
padding: 5
},
bottomLogoContainer:{
alignSelf: "center",
justifyContent: 'center',
alignItems: 'center',
textAlign:"center",
height: 100,
marginBottom: 20,
zIndex: 0
},
bottomLogoImage:{
width: 150,
height: 150,
resizeMode: 'contain',
}
});
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
)
}
return (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
keyExtractor = {(item, index) => index.toString()}
renderItem={({ item }) => (
<Card style={styles.menuContainer}>
{/* <Card.Cover source={{ uri: item.cover_img }} /> */}
<Card.Title title={item.title.toString()} subtitle={item.title.toString()} style={styles.menuItemHeader}/>
<Card.Content style={styles.menuItemBody}>
<Paragraph style = {styles.description_input}>
<View>
<TextInput
underlineColorAndroid = "transparent"
placeholderTextColor = "gray"
autoCapitalize = "none"
multiline={true}
// numberOfLines={4}
placeholder = "Job description"
// onBlur={()=>this.lastNameValidation()}
// onChangeText={last_name => this.setState({ last_name })}
/>
</View>
</Paragraph>
<Paragraph style={styles.action_buttons_positioning}>
<TouchableOpacity onPress={() => alert('Clicked')}>
<View style={styles.action_buttons}>
<Text style={styles.action_buttons_text}>Edit</Text>
</View>
</TouchableOpacity>
</Paragraph>
</Card.Content>
</Card>
)
}
/>
{/* <View style={styles.bottomLogoContainer}>
<Image
style={styles.bottomLogoImage}
source={require('../../../../src/assets/img/logo_120.png')}
/>
</View> */}
</SafeAreaView>
</>
)
}
}
您可以在 menuItemBody
样式对象中添加 paddingHorizontal: 0
,即应用于 Card.Content
组件的样式。
The CardContent
component apparently sets 16
horizontal padding by default.