罗广聪

回复框

... ... @@ -6,14 +6,16 @@ import {
View,
ScrollView,
TouchableOpacity,
Image
Image,
TextInput
} from "react-native";
export default class Details extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
data: this.props.data,
text: "回复 汉克斯"
};
}
componentWillMount() {
... ... @@ -24,7 +26,10 @@ export default class Details extends Component {
const { data } = this.state;
return (
<View style={styles.container}>
<ScrollView automaticallyAdjustContentInsets={false}>
<ScrollView
style={styles.scrollViewContainer}
automaticallyAdjustContentInsets={false}
>
<Text style={styles.titleText} numberOfLines={3}>
{data.title}
</Text>
... ... @@ -59,7 +64,9 @@ export default class Details extends Component {
<View style={styles.itemRightTopLeft}>
<Text style={styles.itemReplyer}>{item.replyer}</Text>
<Text style={styles.itemWord}>回复</Text>
<Text style={styles.itemBeenreplyer}>{item.beenreplyer}</Text>
<Text style={styles.itemBeenreplyer}>
{item.beenreplyer}
</Text>
<Text style={styles.itemTime}>{item.time}</Text>
</View>
<Image
... ... @@ -73,12 +80,47 @@ export default class Details extends Component {
);
})}
</View>
{/* 回复框 */}
<View style={styles.sendMsgContaier}>
<TextInput
style={styles.msgInput}
onChangeText={text => this.setState({ text })}
value={this.state.text}
placeholderTextColor="gray"
selectionColor="#1B9341"
clearTextOnFocus={true}
numberOfLines={1}
clearButtonMode="always"
keyboardType="default"
/>
<TouchableOpacity onPress={() => this.sendMsg()}>
<Text style={styles.sendButton}>发送</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
sendMsg() {
var that = this;
this.setState({
text: "",
// data: that.state.data.comments.push(
// {
// replyer: "噢噢噢",
// replayicon: require("../../assets/Mine/iconpic1.png"),
// beenreplyer: "嘿嘿嘿",
// content: this.state.text,
// time: "刚刚",
// }
// )
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
... ... @@ -87,6 +129,10 @@ const styles = StyleSheet.create({
backgroundColor: "white",
paddingTop: 64
},
scrollViewContainer: {
// height: 300,
marginBottom: 64,
},
titleText: {
marginTop: 21,
marginLeft: 20,
... ... @@ -153,7 +199,8 @@ const styles = StyleSheet.create({
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
height: 45
height: 45,
marginBottom: 16
},
commentsHeaderL: {
fontSize: 15,
... ... @@ -165,33 +212,80 @@ const styles = StyleSheet.create({
color: "#242424"
},
itemContainer: {
paddingTop: 16,
// paddingTop: 16,
paddingBottom: 16,
flexDirection: "row",
justifyContent: "flex-start",
justifyContent: "flex-start"
},
itemIcon: {
width: 32,
height: 32,
height: 32
},
itemRightContainer: {
flex: 1,
marginLeft: 10
marginLeft: 10,
paddingBottom: 16,
borderStyle: "solid",
borderBottomWidth: 1,
borderColor: "#F3F3F3"
},
itemRightTop: {
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 7,
marginBottom: 7
},
itemRightTopLeft: {
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
alignItems: "center"
},
itemReplyer: {
fontSize: 16,
color: "#1B9341"
},
itemWord: {
fontSize: 16
},
itemBeenreplyer: {
fontSize: 16,
color: "#1B9341"
},
itemTime: {
marginLeft: 6,
fontSize: 13,
color: "#999999"
},
itemRightTopRight: {
width: 15,
height: 15
},
itemRightTopRight: {},
itemRightBottom: {
fontSize: 15,
lineHeight: 21,
color: "#242424",
color: "#242424"
},
sendMsgContaier: {
flexDirection: "row",
// justifyContent: "center",
alignItems: "center",
paddingLeft: 15,
paddingRight: 15,
// height: 48
// position: "absolute",
// bottom: 60,
// right: 0,
// backgroundColor: "white",
},
msgInput: {
flex: 7,
fontSize: 15
// color: "#999999",
},
sendButton: {
flex: 3,
fontSize: 15,
color: "#1B9341",
borderColor: "#E6E6E6",
}
});
... ...
... ... @@ -119,7 +119,6 @@ export default class InsuranceCircle extends Component {
onPress={() => {
this.props.navigator.push({
component: Details,
title: "哈哈哈",
passProps: {
data: {...item},
},
... ...
File mode changed