新的反应，我目前正在玩列表。我正在研究一个发现的示例，但想对其添加更多操作。我正在尝试扩大接触范围，使其在按一下以显示照片时也能显示更多信息，例如电话号码或电子邮件地址等，类似于在iPhone上的工作方式。我知道您将不得不使用按播功能，但不确定如何设置其余功能，因此，如果没有太大的麻烦，任何建议都是很好的。 谢谢import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
SectionList
} from "react-native";
export default class ContactList extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{
title: "Contacts",
data: [
{
key: 1,
name: "User 1",
image:
"https://bootdey.com/img/Content/avatar/avatar1.png"
},
{
key: 2,
name: "User 2",
image: "https://bootdey.com/img/Content/avatar/avatar1.png"
},
{
key: 3,
name: "User 3",
image: "https://bootdey.com/img/Content/avatar/avatar7.png"
},
{
key: 4,
name: "User 1",
image: "https://bootdey.com/img/Content/avatar/avatar3.png"
},
{
key: 5,
name: "User 2",
image: "https://bootdey.com/img/Content/avatar/avatar4.png"
},
{
key: 6,
name: "User 1",
image: "https://bootdey.com/img/Content/avatar/avatar5.png"
},
{
key: 7,
name: "User 1",
image: "https://bootdey.com/img/Content/avatar/avatar2.png"
}
]
}
]
};
}
render() {
return (
<View style={styles.container}>
<SectionList
sections={this.state.data}
renderSectionHeader={({ section }) => {
return (
<View style={styles.titleContainer}>
<Text style={styles.title}>{section.title}</Text>
</View>
);
}}
renderItem={({ item }) => {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {}}>
<Image style={styles.image} source={{ uri: item.image }} />
</TouchableOpacity>
<View style={styles.content}>
<View style={styles.contentHeader}>
<Text style={styles.name}>{item.name}</Text>
</View>
</View>
</View>
);
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
marginTop: 20,
padding: 10
},
titleContainer: {
shadowColor: "#00000021",
shadowOffset: {
width: 2
},
shadowOpacity: 0.5,
shadowRadius: 4,
marginVertical: 8,
backgroundColor: "#DCDCDC",
padding: 10
},
title: {
fontSize: 25,
color: "#000000"
},
container: {
paddingVertical: 12,
flexDirection: "row",
alignItems: "flex-start",
flexDirection: "row",
alignItems: "flex-start"
},
content: {
marginLeft: 16,
flex: 1
},
contentHeader: {
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 6
},
separator: {
height: 1,
backgroundColor: "#CCCCCC"
},
image: {
width: 45,
height: 45,
borderRadius: 20,
marginLeft: 20
},
time: {
fontSize: 11,
color: "#808080"
},
name: {
fontSize: 16,
fontWeight: "bold"
}
});
0 个答案:
没有答案