罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
28c0e690 1 parent 4c60e6f2

回复框

Inline Side-by-side
Showing 5 changed files with 107 additions and 14 deletions
@@ -6,14 +6,16 @@ import { @@ -6,14 +6,16 @@ import {
6 View, 6 View,
7 ScrollView, 7 ScrollView,
8 TouchableOpacity, 8 TouchableOpacity,
9 - Image 9 + Image,
  10 + TextInput
10 } from "react-native"; 11 } from "react-native";
11 12
12 export default class Details extends Component { 13 export default class Details extends Component {
13 constructor(props) { 14 constructor(props) {
14 super(props); 15 super(props);
15 this.state = { 16 this.state = {
16 - data: this.props.data 17 + data: this.props.data,
  18 + text: "回复 汉克斯"
17 }; 19 };
18 } 20 }
19 componentWillMount() { 21 componentWillMount() {
@@ -24,7 +26,10 @@ export default class Details extends Component { @@ -24,7 +26,10 @@ export default class Details extends Component {
24 const { data } = this.state; 26 const { data } = this.state;
25 return ( 27 return (
26 <View style={styles.container}> 28 <View style={styles.container}>
27 - <ScrollView automaticallyAdjustContentInsets={false}> 29 + <ScrollView
  30 + style={styles.scrollViewContainer}
  31 + automaticallyAdjustContentInsets={false}
  32 + >
28 <Text style={styles.titleText} numberOfLines={3}> 33 <Text style={styles.titleText} numberOfLines={3}>
29 {data.title} 34 {data.title}
30 </Text> 35 </Text>
@@ -59,7 +64,9 @@ export default class Details extends Component { @@ -59,7 +64,9 @@ export default class Details extends Component {
59 <View style={styles.itemRightTopLeft}> 64 <View style={styles.itemRightTopLeft}>
60 <Text style={styles.itemReplyer}>{item.replyer}</Text> 65 <Text style={styles.itemReplyer}>{item.replyer}</Text>
61 <Text style={styles.itemWord}>回复</Text> 66 <Text style={styles.itemWord}>回复</Text>
62 - <Text style={styles.itemBeenreplyer}>{item.beenreplyer}</Text> 67 + <Text style={styles.itemBeenreplyer}>
  68 + {item.beenreplyer}
  69 + </Text>
63 <Text style={styles.itemTime}>{item.time}</Text> 70 <Text style={styles.itemTime}>{item.time}</Text>
64 </View> 71 </View>
65 <Image 72 <Image
@@ -73,12 +80,47 @@ export default class Details extends Component { @@ -73,12 +80,47 @@ export default class Details extends Component {
73 ); 80 );
74 })} 81 })}
75 </View> 82 </View>
  83 + {/* 回复框 */}
  84 + <View style={styles.sendMsgContaier}>
  85 + <TextInput
  86 + style={styles.msgInput}
  87 + onChangeText={text => this.setState({ text })}
  88 + value={this.state.text}
  89 + placeholderTextColor="gray"
  90 + selectionColor="#1B9341"
  91 + clearTextOnFocus={true}
  92 + numberOfLines={1}
  93 + clearButtonMode="always"
  94 + keyboardType="default"
  95 + />
  96 + <TouchableOpacity onPress={() => this.sendMsg()}>
  97 + <Text style={styles.sendButton}>发送</Text>
  98 + </TouchableOpacity>
  99 + </View>
76 </ScrollView> 100 </ScrollView>
77 </View> 101 </View>
78 ); 102 );
79 } 103 }
  104 +
  105 + sendMsg() {
  106 + var that = this;
  107 + this.setState({
  108 + text: "",
  109 + // data: that.state.data.comments.push(
  110 + // {
  111 + // replyer: "噢噢噢",
  112 + // replayicon: require("../../assets/Mine/iconpic1.png"),
  113 + // beenreplyer: "嘿嘿嘿",
  114 + // content: this.state.text,
  115 + // time: "刚刚",
  116 + // }
  117 + // )
  118 + });
  119 + }
80 } 120 }
81 121
  122 +
  123 +
82 const styles = StyleSheet.create({ 124 const styles = StyleSheet.create({
83 container: { 125 container: {
84 flex: 1, 126 flex: 1,
@@ -87,6 +129,10 @@ const styles = StyleSheet.create({ @@ -87,6 +129,10 @@ const styles = StyleSheet.create({
87 backgroundColor: "white", 129 backgroundColor: "white",
88 paddingTop: 64 130 paddingTop: 64
89 }, 131 },
  132 + scrollViewContainer: {
  133 + // height: 300,
  134 + marginBottom: 64,
  135 + },
90 titleText: { 136 titleText: {
91 marginTop: 21, 137 marginTop: 21,
92 marginLeft: 20, 138 marginLeft: 20,
@@ -153,7 +199,8 @@ const styles = StyleSheet.create({ @@ -153,7 +199,8 @@ const styles = StyleSheet.create({
153 flexDirection: "row", 199 flexDirection: "row",
154 justifyContent: "flex-start", 200 justifyContent: "flex-start",
155 alignItems: "center", 201 alignItems: "center",
156 - height: 45 202 + height: 45,
  203 + marginBottom: 16
157 }, 204 },
158 commentsHeaderL: { 205 commentsHeaderL: {
159 fontSize: 15, 206 fontSize: 15,
@@ -165,33 +212,80 @@ const styles = StyleSheet.create({ @@ -165,33 +212,80 @@ const styles = StyleSheet.create({
165 color: "#242424" 212 color: "#242424"
166 }, 213 },
167 itemContainer: { 214 itemContainer: {
168 - paddingTop: 16, 215 + // paddingTop: 16,
169 paddingBottom: 16, 216 paddingBottom: 16,
170 flexDirection: "row", 217 flexDirection: "row",
171 - justifyContent: "flex-start", 218 + justifyContent: "flex-start"
172 }, 219 },
173 itemIcon: { 220 itemIcon: {
174 width: 32, 221 width: 32,
175 - height: 32, 222 + height: 32
176 }, 223 },
177 itemRightContainer: { 224 itemRightContainer: {
178 flex: 1, 225 flex: 1,
179 - marginLeft: 10 226 + marginLeft: 10,
  227 + paddingBottom: 16,
  228 + borderStyle: "solid",
  229 + borderBottomWidth: 1,
  230 + borderColor: "#F3F3F3"
180 }, 231 },
181 itemRightTop: { 232 itemRightTop: {
182 flexDirection: "row", 233 flexDirection: "row",
183 justifyContent: "space-between", 234 justifyContent: "space-between",
184 - marginBottom: 7, 235 + marginBottom: 7
185 }, 236 },
186 itemRightTopLeft: { 237 itemRightTopLeft: {
187 flexDirection: "row", 238 flexDirection: "row",
188 justifyContent: "flex-start", 239 justifyContent: "flex-start",
189 - alignItems: "center", 240 + alignItems: "center"
  241 + },
  242 + itemReplyer: {
  243 + fontSize: 16,
  244 + color: "#1B9341"
  245 + },
  246 + itemWord: {
  247 + fontSize: 16
  248 + },
  249 + itemBeenreplyer: {
  250 + fontSize: 16,
  251 + color: "#1B9341"
  252 + },
  253 + itemTime: {
  254 + marginLeft: 6,
  255 + fontSize: 13,
  256 + color: "#999999"
  257 + },
  258 + itemRightTopRight: {
  259 + width: 15,
  260 + height: 15
190 }, 261 },
191 - itemRightTopRight: {},  
192 itemRightBottom: { 262 itemRightBottom: {
193 fontSize: 15, 263 fontSize: 15,
194 lineHeight: 21, 264 lineHeight: 21,
195 - color: "#242424", 265 + color: "#242424"
  266 + },
  267 + sendMsgContaier: {
  268 + flexDirection: "row",
  269 + // justifyContent: "center",
  270 + alignItems: "center",
  271 + paddingLeft: 15,
  272 + paddingRight: 15,
  273 + // height: 48
  274 + // position: "absolute",
  275 + // bottom: 60,
  276 + // right: 0,
  277 + // backgroundColor: "white",
196 }, 278 },
  279 + msgInput: {
  280 + flex: 7,
  281 + fontSize: 15
  282 + // color: "#999999",
  283 + },
  284 + sendButton: {
  285 + flex: 3,
  286 + fontSize: 15,
  287 + color: "#1B9341",
  288 + borderColor: "#E6E6E6",
  289 +
  290 + }
197 }); 291 });
@@ -119,7 +119,6 @@ export default class InsuranceCircle extends Component { @@ -119,7 +119,6 @@ export default class InsuranceCircle extends Component {
119 onPress={() => { 119 onPress={() => {
120 this.props.navigator.push({ 120 this.props.navigator.push({
121 component: Details, 121 component: Details,
122 - title: "哈哈哈",  
123 passProps: { 122 passProps: {
124 data: {...item}, 123 data: {...item},
125 }, 124 },
File mode changed