PersonalInfo.js
2.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React, { Component } from "react";
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
TouchableHighlight,
Image,
Modal
} from "react-native";
export default class PersonalInfo extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false
};
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
render() {
const { name, identity } = this.props;
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.itemContainer}
onPress={() => {
this.setModalVisible(true);
}}
>
<Text style={styles.itemLeft}>昵称</Text>
<View style={styles.itemRight}>
<Text style={styles.itemContent}>{name}</Text>
<Image
style={styles.itemArrow}
source={require("../../assets/Mine/rightArrow_gray.png")}
/>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.itemContainer}
onPress={() => {
this.setModalVisible(true);
}}
>
<Text style={styles.itemLeft}>职业</Text>
<View style={styles.itemRight}>
<Text style={styles.itemContent}>{identity}</Text>
<Image
style={styles.itemArrow}
source={require("../../assets/Mine/rightArrow_gray.png")}
/>
</View>
</TouchableOpacity>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
alert("Modal has been closed.");
}}
>
<View style={{ marginTop: 22 }}>
<View>
<Text>Hello World!</Text>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}
>
<Text>Hide Modal</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF",
paddingTop: 74
},
itemContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingLeft: 16,
paddingRight: 16,
paddingTop: 13,
paddingBottom: 13,
marginBottom: 1,
backgroundColor: "white"
},
itemLeft: {
fontSize: 15,
color: "#242424"
},
itemRight: {
flexDirection: "row",
alignItems: "center"
},
itemContent: {
fontSize: 15,
color: "#7A7A7A",
marginRight: 6
},
itemArrow: {
width: 14,
height: 14
}
});