罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
aa687257 1 parent e2f5deec

增加文章组件

Inline Side-by-side
Showing 17 changed files with 320 additions and 96 deletions
... ... @@ -16,6 +16,7 @@ import Login from "./src/pages/Login";
import AllProduct from "./src/pages/Home/allProduct";
import CommonWebView from "./src/Components/CommonWebView";
import CommonImageView from "./src/Components/CommonImageView";
import ArticleTemplate from "./src/Components/articleTemplate";
import Details from "./src/pages/InsuranceCircle/details";
// 底部导航栏配置，但也只是作为一个页面，加载到StackNavigator成为第一个页面
... ... @@ -89,6 +90,7 @@ const ProtectGod = StackNavigator(
},
CommonWebView: { screen: CommonWebView },
CommonImageView: { screen: CommonImageView },
ArticleTemplate: { screen: ArticleTemplate },
Details: { screen: Details }
},{
navigationOptions: {
... ...
... ... @@ -120,7 +120,7 @@
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
buildConfiguration = "Release">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
... ...
... ... @@ -71,7 +71,7 @@
"extent" : "full-screen",
"idiom" : "iphone",
"subtype" : "736h",
"filename" : "HD5.5.png",
"filename" : "1242-2208.png",
"minimum-system-version" : "8.0",
"orientation" : "portrait",
"scale" : "3x"
... ... @@ -88,7 +88,7 @@
"extent" : "full-screen",
"idiom" : "iphone",
"subtype" : "667h",
"filename" : "HD4.7.png",
"filename" : "750-1334.png",
"minimum-system-version" : "8.0",
"orientation" : "portrait",
"scale" : "2x"
... ... @@ -96,7 +96,7 @@
{
"orientation" : "portrait",
"idiom" : "iphone",
"filename" : "2x.png",
"filename" : "640-960.png",
"extent" : "full-screen",
"minimum-system-version" : "7.0",
"scale" : "2x"
... ... @@ -105,7 +105,7 @@
"extent" : "full-screen",
"idiom" : "iphone",
"subtype" : "retina4",
"filename" : "Retina4.png",
"filename" : "640-1136.png",
"minimum-system-version" : "7.0",
"orientation" : "portrait",
"scale" : "2x"
... ...
import React, { Component } from "react";
import {
StyleSheet,
WebView,
View,
Image,
Dimensions,
ScrollView,
Text,
FlatList,
ListView
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
export default class ArticleTemplate extends Component {
constructor(props) {
super(props);
this.state = {
id: this.props.navigation.state.params.item.id,
articleData: {
paragraph: []
}
};
}
componentWillMount() {
console.log("will 的ID",this.state.id)
this.getArticles();
}
getArticles() {
let that = this,
id = this.state.id;
return fetch(`https://devpay.brae.co/test/insurance/topic/${id}`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
articleData: respJson.data.articleData
})
console.log("详情页的文章",respJson.data.articleData)
}
});
}
render() {
const { articleData } = this.state;
return (
<View style={styles.container}>
<ScrollView automaticallyAdjustContentInsets={false}>
<View style={styles.headerContaier}>
<Text style={styles.headerTitle}>{articleData.title}</Text>
<View style={styles.infoWrapper}>
<Text style={styles.time}>{articleData.time}</Text>
<Text style={styles.author}>{articleData.author}</Text>
</View>
</View>
<View style={styles.contentConatiner}>
{articleData.paragraph.map((item, index) => {
return (
<View style={styles.paragraphContainer} key={index}>
{item.title ? (
<Text style={styles.paragraphTitle}>{item.title}</Text>
) : null}
{item.image ? (
<Image style={styles.paragraphImage} resizeMode="contain" source={{uri: item.image}} />
) : null}
<Text style={styles.paragraphContent}>{item.content}</Text>
</View>
);
})}
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white"
},
headerContaier: {
marginTop: 23,
marginLeft: 15,
marginRight: 15
},
headerTitle: {
color: "#030303",
fontSize: 24,
lineHeight: 30
},
infoWrapper: {
marginTop: 10,
flexDirection: "row"
},
time: {
fontSize: 15,
color: "#999999",
marginRight: 8
},
author: {
fontSize: 15,
color: "#999999"
},
contentConatiner: {
marginTop: 20,
marginLeft: 15,
marginRight: 15
},
paragraphContainer: {
marginTop: 20,
marginBottom: 20
},
paragraphTitle: {
alignSelf: "center",
color: "#1B9341",
fontSize: 15,
marginBottom: 15,
// backgroundColor: "red",
},
paragraphImage: {
width: Dimensions.get("window").width - 30,
height: 140,
// backgroundColor: "blue",
marginBottom: 20,
},
paragraphContent: {
color: "#555555",
fontSize: 15,
lineHeight: 22,
// backgroundColor: "yellow",
}
});
... ...
No preview for this file type
... ... @@ -8,6 +8,7 @@ import {
TouchableOpacity,
ScrollView,
FlatList,
ListView,
Dimensions
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
... ... @@ -21,51 +22,11 @@ export default class Home extends Component {
// };
constructor(props) {
super(props);
this._renderMap = this._renderMap.bind(this);
this._swiper = this._swiper.bind(this);
this.state = {
ListData: [
{
title: "重疾、大病和防癌险，傻傻分不清？",
key: 1,
context: "重疾险、大病保险和防癌险，这几大险种你能分得清吗？",
// context: "重疾险、大病保险和防癌险，这几大险...",
url: "http://mp.weixin.qq.com/s/vSz_WuGpPYNMNpGQv-zxAQ",
imgurl: require("../../assets/home/Headlines_重疾险.png")
},
{
title: "想为家里老人买份保险，怎么选？",
key: 2,
context: "在如今的商业保险中，老年人的保险成为了很多人比较纠结的问题。",
// context: "在如今的商业保险中，老年人的保险成...",
url: "http://mp.weixin.qq.com/s/R_KuAzEVQCVKj7FUOzuHJw",
imgurl: require("../../assets/home/Headlines_中老年医疗险.png")
},
{
title: "驾车远行需要做哪些保险准备？",
key: 3,
context: "出行前我们需要做哪些准备工作，才能避免发生事故后的束手无策？",
// context: "出行前我们需要做哪些准备工作，才能...",
url: "http://mp.weixin.qq.com/s/Tkm4TrBEXqXJzC4FQdW2MQ",
imgurl: require("../../assets/home/Headlines_出驾远行.png")
},
{
title: "选购儿童险，这几大原则也应注意！",
key: 4,
context: "认真对待关于孩子的保险问题，还需要注意投保时候的一些原则。",
// context: "认真对待关于孩子的保险问题，还需...",
url: "http://mp.weixin.qq.com/s/iUEiBMik_3WMuxnAPFDXXQ",
imgurl: require("../../assets/home/Headlines_儿童险.png")
},
{
title: "重疾险这几个关键问题也需了解！",
key: 5,
context: "作为咨询热度较高的险种，很多人对重疾险有着不同的疑问。",
// context: "作为咨询热度较高的险种，很多人对重...",
url: "http://mp.weixin.qq.com/s/VP-0BcBTvipbuq9bgOZ0NQ",
imgurl: require("../../assets/home/Headlines_意外险.png")
}
],
ListData: [],
swiperImgList: [
// {
// img: require("../../assets/home/slider_1.jpeg")
... ... @@ -82,8 +43,63 @@ export default class Home extends Component {
]
};
}
componentDidMount() {
console.log("thisprops", this.props);
componentWillMount() {
this.getListData();
this.getBannar();
}
componentDidMount() {}
getListData() {
let that = this;
return fetch(`https://devpay.brae.co/test/insurance/topic`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
ListData: respJson.data.topic
})
}
});
}
getBannar() {
let that = this;
return fetch(`https://devpay.brae.co/test/insurance/banner`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
swiperImgList: respJson.data.banner
})
console.log("bannar图",respJson.data.banner)
}
});
}
_renderMap() {
const { navigate } = this.props.navigation;
... ... @@ -111,7 +127,7 @@ export default class Home extends Component {
}
_swiper() {
const { navigate } = this.props.navigation;
const {height, width} = Dimensions.get('window');
const { height, width } = Dimensions.get("window");
const imgHeight = width * 140 / 375;
return (
<View style={{ height: imgHeight }}>
... ... @@ -122,7 +138,7 @@ export default class Home extends Component {
height={imgHeight}
dotStyle={{
width: 6,
height: 6,
height: 6
}}
activeDotStyle={{
width: 6,
... ... @@ -138,7 +154,7 @@ export default class Home extends Component {
<Image
style={styles.slideImg}
source={item.img}
width={Dimensions.get('window').width}
width={Dimensions.get("window").width}
resizeMode="stretch"
/>
</TouchableOpacity>
... ... @@ -149,8 +165,11 @@ export default class Home extends Component {
);
}
render() {
console.log("首页的this.props", this);
// console.log("首页的this.props", this);
// console.log("render首页文章列表", this.state.ListData);
const { navigate } = this.props.navigation;
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const dataSource = ds.cloneWithRows(this.state.ListData);
return (
<View style={styles.container}>
{this._swiper()}
... ... @@ -171,7 +190,34 @@ export default class Home extends Component {
<View style={styles.textContainer}>
<Text style={styles.minText}>保险头条</Text>
</View>
<ScrollView
<ListView
dataSource={dataSource}
enableEmptySections = {true}
renderRow={(item, index) => {
return (
<TouchableOpacity
style={styles.itemContainer}
onPress={() => navigate("ArticleTemplate", { item: item })}
>
<View style={styles.itemImgWrapper}>
<Image
source={{ uri: item.image }}
style={{ width: 74, height: 74 }}
/>
</View>
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop} numberOfLines={1}>
{item.title}
</Text>
<Text style={styles.itemTextBottom} numberOfLines={1}>
{item.summary}
</Text>
</View>
</TouchableOpacity>
);
}}
/>
{/* <ScrollView
style={styles.listContainer}
automaticallyAdjustContentInsets={false}
>
... ... @@ -180,27 +226,27 @@ export default class Home extends Component {
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => navigate("CommonWebView", { item: item })}
onPress={() => navigate("ArticleTemplate", { item: item })}
>
<View style={styles.itemImgWrapper}>
<Image
source={item.imgurl}
source={{uri: item.image}}
style={{ width: 74, height: 74 }}
/>
</View>
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop} numberOfLines={1}>
{item.title}
</Text>
<Text style={styles.itemTextBottom} numberOfLines={1}>
{item.context}
</Text>
<Text style={styles.itemTextTop} numberOfLines={1}>
{item.title}
</Text>
<Text style={styles.itemTextBottom} numberOfLines={1}>
{item.summary}
</Text>
</View>
</TouchableOpacity>
);
})}
<Text style={styles.scrollViewText}>没有更多了</Text>
</ScrollView>
</ScrollView> */}
</View>
);
}
... ... @@ -215,8 +261,8 @@ const styles = StyleSheet.create({
},
swiperWrapper: {},
slide: {
height: Dimensions.get('window').width*140/375,
width: Dimensions.get('window').width,
height: Dimensions.get("window").width * 140 / 375,
width: Dimensions.get("window").width,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#92BBD9"
... ... @@ -264,7 +310,7 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
borderTopColor: "#EEEEEE",
borderStyle: "solid",
paddingLeft: 13,
paddingLeft: 13
// paddingRight: 13
},
itemImgWrapper: {
... ...
... ... @@ -20,39 +20,69 @@ export default class InsuranceChurch extends Component {
// this._renderMap = this._renderMap.bind(this);
this.state = {
ListData: [
{
title: "凶猛台风来袭！与伤亡相关的保险知识你需要了解！",
time: "刚刚",
url: "http://mp.weixin.qq.com/s/_lGAz9sSxuulbdPGZ020cQ",
imgurl: require("../../assets/church/1.png")
},
{
title: "17世纪伦敦火灾频发，牛掰的保险公司有高招！",
time: "3小时前",
url: "http://mp.weixin.qq.com/s/cJ7oHQ__GBiBxBGZ1SCgDg",
imgurl: require("../../assets/church/2.png")
},
{
title: "这两个国家为何会有这些天气保险呢？原来是这样.....",
time: "昨天",
url: "http://mp.weixin.qq.com/s/EimQbKC0ziqN0o8_S1ACFQ",
imgurl: require("../../assets/church/3.png")
},
{
title: "车险小白必须知道的不计免赔险",
time: "9月10日",
url: "http://mp.weixin.qq.com/s/W9uR5G6ZlTb7HLLX-DZzSQ",
imgurl: require("../../assets/church/4.png")
},
{
title: "“五险一金”进了嘻哈歌词，有关社保和商业保险的知识你了解吗？",
time: "9月9日",
url: "http://mp.weixin.qq.com/s/0I7p2vaM23CsDiI41hHNOQ",
imgurl: require("../../assets/church/5.png")
},
// {
// title: "凶猛台风来袭！与伤亡相关的保险知识你需要了解！",
// time: "刚刚",
// url: "http://mp.weixin.qq.com/s/_lGAz9sSxuulbdPGZ020cQ",
// imgurl: require("../../assets/church/1.png")
// },
// {
// title: "17世纪伦敦火灾频发，牛掰的保险公司有高招！",
// time: "3小时前",
// url: "http://mp.weixin.qq.com/s/cJ7oHQ__GBiBxBGZ1SCgDg",
// imgurl: require("../../assets/church/2.png")
// },
// {
// title: "这两个国家为何会有这些天气保险呢？原来是这样.....",
// time: "昨天",
// url: "http://mp.weixin.qq.com/s/EimQbKC0ziqN0o8_S1ACFQ",
// imgurl: require("../../assets/church/3.png")
// },
// {
// title: "车险小白必须知道的不计免赔险",
// time: "9月10日",
// url: "http://mp.weixin.qq.com/s/W9uR5G6ZlTb7HLLX-DZzSQ",
// imgurl: require("../../assets/church/4.png")
// },
// {
// title: "“五险一金”进了嘻哈歌词，有关社保和商业保险的知识你了解吗？",
// time: "9月9日",
// url: "http://mp.weixin.qq.com/s/0I7p2vaM23CsDiI41hHNOQ",
// imgurl: require("../../assets/church/5.png")
// },
]
};
}
componentWillMount() {
this.getListData();
}
getListData() {
let that = this;
return fetch(`https://devpay.brae.co/test/insurance/story`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(resp => {
if (resp.status === 200) {
return resp.json();
} else {
console.error("something went wrong!");
}
})
.then(respJson => {
if (respJson.enmsg != "ok") {
alert(respJson.cnmsg);
} else {
that.setState({
ListData: respJson.data
})
console.log("保堂列表",respJson.data)
}
});
}
render() {
const { navigate } = this.props.navigation;
... ...