罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
005e61a9 1 parent d926c1b3

完成基本跳转

Inline Side-by-side
Showing 48 changed files with 505 additions and 147 deletions
import React, { Component } from 'react';
import {
StyleSheet,
WebView,
View,
} from 'react-native';
export default class CommonWebview extends Component {
constructor(props) {
super(props);
}
render() {
console.log("url",this.props.url)
return (
<WebView
style={styles.container}
source={{uri: this.props.url}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 64,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF"
},
});
... ...
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, Image, ScrollView } from "react-native";
export default class NewsList extends Component {
render() {
return (
<ScrollView style={styles.container} automaticallyAdjustContentInsets={false}>
<ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
<ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
<ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
<ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
</ScrollView>
);
}
}
class ListItem extends Component {
render() {
return (
<TouchableOpacity style={styles.itemContainer}>
<View style={styles.itemImgWrapper}></View>
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop}>{this.props.title}</Text>
<Text style={styles.itemTextBottom}>{this.props.context}</Text>
</View>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
container: {
height:150,
},
itemContainer: {
height: 90,
backgroundColor: "#fff",
flexDirection: 'row',
alignItems: "center",
borderTopWidth: 1,
borderTopColor: "#EEEEEE",
borderStyle: "solid",
paddingLeft: 13,
paddingRight: 13,
},
itemImgWrapper: {
width:74,
height:66,
backgroundColor: "#ccc",
marginRight: 12
},
itemRightWrapper: {
justifyContent: "center",
height: 66,
flex: 1
// marginRight: 13
},
itemTextTop: {
fontSize: 16,
color: "#202020",
lineHeight: 21
},
itemTextBottom: {
fontSize: 13,
color: "#7A7A7A",
lineHeight: 18
},
});
\ No newline at end of file
import React, { Component } from "react";
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Image
} from "react-native";
import CommonWebView from "../../Components/CommonWebView";
export default class AllProduct extends Component {
constructor(props) {
super(props);
this.state = {
ListData: [
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.google.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.zhihu.com/",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
}
]
};
}
render() {
return (
<View style={styles.container}>
{/* <NewsList /> */}
<ScrollView
style={styles.scrollViewContainer}
automaticallyAdjustContentInsets={false}
>
{this.state.ListData.map((item, index) => {
return (
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop} numberOfLines={2}>
{item.title}
</Text>
<Text style={styles.itemTextBottom}>{item.time}</Text>
</View>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF",
paddingTop: 74
},
scrollViewContainer: {
height: 300
// backgroundColor: "red"
},
scrollViewText: {
color: "#7A7A7A",
fontSize: 13,
marginTop: 10,
textAlign: "center"
},
itemContainer: {
height: 102,
backgroundColor: "#fff",
flexDirection: "row",
alignItems: "center",
borderTopWidth: 1,
borderTopColor: "#EEEEEE",
borderStyle: "solid",
paddingLeft: 13,
paddingRight: 13
},
itemImgWrapper: {
width: 88,
height: 78,
// backgroundColor: "#ccc",
marginRight: 12
},
itemRightWrapper: {
justifyContent: "center",
height: 66,
flex: 1
// marginRight: 13
},
itemTextTop: {
fontSize: 16,
color: "#202020",
lineHeight: 21
},
itemTextBottom: {
fontSize: 13,
color: "#7A7A7A",
lineHeight: 18
}
});
... ...
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ScrollView
} from "react-native";
import Carousel from "../../Components/Carousel";
import NewsList from "./NewList";
export default class Main extends Component {
import AllProduct from "./allProduct";
import CommonWebView from "../../Components/CommonWebView";
export default class Home extends Component {
constructor(props) {
super(props);
this._renderMap = this._renderMap.bind(this);
this.state = {
ListData: [
{
title: "平安保险第一个",
context: "600万医疗报废，自费药，进口药，器材费",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险第二个",
context: "600万医疗报废，自费药，进口药，器材费",
url: "https://www.google.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险第三个",
context: "600万医疗报废，自费药，进口药，器材费",
url: "https://www.zhihu.com/",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险第四个",
context: "600万医疗报废，自费药，进口药，器材费",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
}
]
};
}
componentDidMount() {
console.log('thisprops',this.props);
console.log("thisprops", this.props);
}
_renderMap() {
return this.state.ListData.map((item, index) => {
return (
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this._jumpToWebView(item);
}}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop}>{item.title}</Text>
<Text style={styles.itemTextBottom}>{item.context}</Text>
</View>
</TouchableOpacity>
);
});
}
_jumpToWebView(item) {
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}
gotoAllProduct() {
this.props.navigator.push({
component: AllProduct,
title: "全部产品"
});
}
render() {
return (
<View style={styles.container}>
<Carousel />
<TouchableOpacity style={styles.midContainer}>
<Image source={require('../../assets/首页的副本/pic.png')} style={{width:72, height:18}} />
<TouchableOpacity
style={styles.midContainer}
onPress={() => {
this.gotoAllProduct();
}}
>
<Image
source={require("../../assets/home/pic.png")}
style={{ width: 72, height: 18 }}
/>
<Text style={styles.midText}>平安保险2017版</Text>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={styles.minText}>保险头条</Text>
</View>
<NewsList />
<ScrollView
style={styles.listContainer}
automaticallyAdjustContentInsets={false}
>
{this._renderMap()}
</ScrollView>
</View>
);
}
... ... @@ -38,24 +123,59 @@ const styles = StyleSheet.create({
height: 45,
// width: 200,
// alignSelf: 'center',
backgroundColor: '#fff',
backgroundColor: "#fff",
alignItems: "center",
flexDirection: 'row',
flexDirection: "row",
paddingLeft: 13
},
midText: {
fontSize: 15,
paddingLeft: 9,
// fontFamily: PingFang-SC-Medium,
color: '#202020'
color: "#202020"
},
textContainer: {
backgroundColor: '#fff',
backgroundColor: "#fff",
marginTop: 10,
height: 45,
justifyContent: "center",
paddingLeft: 13,
paddingLeft: 13
// fontSize: 15,
// color: "#202020",
},
listContainer: {
height: 150
},
itemContainer: {
height: 90,
backgroundColor: "#fff",
flexDirection: "row",
alignItems: "center",
borderTopWidth: 1,
borderTopColor: "#EEEEEE",
borderStyle: "solid",
paddingLeft: 13,
paddingRight: 13
},
itemImgWrapper: {
width: 74,
height: 66,
marginRight: 12
},
itemRightWrapper: {
justifyContent: "center",
height: 66,
flex: 1
// marginRight: 13
},
itemTextTop: {
fontSize: 16,
color: "#202020",
lineHeight: 21
},
itemTextBottom: {
fontSize: 13,
color: "#7A7A7A",
lineHeight: 18
}
});
... ...
import React, { Component } from 'react';
import React, { Component } from "react";
import {
AppRegistry,
StyleSheet,
... ... @@ -8,45 +7,78 @@ import {
ScrollView,
TouchableOpacity,
Image
} from 'react-native';
} from "react-native";
import CommonWebView from "../../Components/CommonWebView";
export default class InsuranceChurch extends Component {
render() {
return (
<View style={styles.container}>
<NewsList />
</View>
);
constructor(props) {
super(props);
// this._renderMap = this._renderMap.bind(this);
this.state = {
ListData: [
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.google.com",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.zhihu.com/",
imgurl: require("../../assets/circle/newspic.png")
},
{
title: "平安保险2017版平安保险平安保险平安保险",
time: "刚刚",
url: "https://www.baidu.com",
imgurl: require("../../assets/circle/newspic.png")
}
}
class NewsList extends Component {
render() {
return (
<ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
<ListItem title={"平安保险2017版平安保险平安保险平安保险"} content={"刚刚"} />
<ListItem title={"平安保险2017版"} content={"刚刚"} />
<ListItem title={"平安保险2017版平安保险平安保险平安保平安保险2017版平安保险平安保险平安保险平安保险平安保险平安保险2017版平安保险平安保险平安保险平安保险平安保险险平安保险平安保险"} content={"刚刚"} />
<ListItem title={"平安保险2017版"} content={"刚刚"} />
<Text style={styles.scrollViewText}>没有更多了</Text>
</ScrollView>
);
]
};
}
}
class ListItem extends Component {
render() {
return (
<TouchableOpacity style={styles.itemContainer}>
<View style={styles.itemImgWrapper}></View>
<View style={styles.container}>
{/* <NewsList /> */}
<ScrollView
style={styles.scrollViewContainer}
automaticallyAdjustContentInsets={false}
>
{this.state.ListData.map((item, index) => {
return (
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
<Text style={styles.itemTextTop} numberOfLines={2}>{this.props.title}</Text>
<Text style={styles.itemTextBottom}>{this.props.content}</Text>
<Text style={styles.itemTextTop} numberOfLines={2}>
{item.title}
</Text>
<Text style={styles.itemTextBottom}>{item.time}</Text>
</View>
</TouchableOpacity>
)
);
})}
</ScrollView>
</View>
);
}
}
... ... @@ -59,7 +91,7 @@ const styles = StyleSheet.create({
paddingTop: 74
},
scrollViewContainer: {
height: 300,
height: 300
// backgroundColor: "red"
},
scrollViewText: {
... ... @@ -71,18 +103,18 @@ const styles = StyleSheet.create({
itemContainer: {
height: 102,
backgroundColor: "#fff",
flexDirection: 'row',
flexDirection: "row",
alignItems: "center",
borderTopWidth: 1,
borderTopColor: "#EEEEEE",
borderStyle: "solid",
paddingLeft: 13,
paddingRight: 13,
paddingRight: 13
},
itemImgWrapper: {
width:88,
height:78,
backgroundColor: "#ccc",
width: 88,
height: 78,
// backgroundColor: "#ccc",
marginRight: 12
},
itemRightWrapper: {
... ... @@ -100,6 +132,5 @@ const styles = StyleSheet.create({
fontSize: 13,
color: "#7A7A7A",
lineHeight: 18
},
}
});
... ...
... ... @@ -9,12 +9,13 @@ import {
TouchableOpacity,
Image
} from 'react-native';
import CommonWebView from "../../Components/CommonWebView";
export default class InsuranceCircle extends Component {
render() {
return (
<View style={styles.container}>
<NewsList />
<NewsList jumP={() => {this.props.navigator.push({component:CommonWebView,title:"hjjj",rightButtonTitle: 'Cancel',})}} />
</View>
);
}
... ... @@ -25,6 +26,7 @@ class NewsList extends Component {
return (
<ScrollView style={styles.scrollViewContainer} automaticallyAdjustContentInsets={false}>
<ListItem
jump={this.props.jumP}
title={"家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…"}
content={"现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…"}
name={"汉克斯"}
... ... @@ -45,13 +47,13 @@ class NewsList extends Component {
class ListItem extends Component {
render() {
return (
<TouchableOpacity style={styles.itemContainer}>
<TouchableOpacity style={styles.itemContainer} onPress={this.props.jump}>
<Text style={styles.itemTitle} numberOfLines={2}>{this.props.title}</Text>
<Text style={styles.itemContent} numberOfLines={3}>{this.props.content}</Text>
<View style={styles.itemInfoWrapper}>
<View style={styles.itemInfoLeft}>
{/* <Image style={styles.itemInfoIcon} /> */}
<View style={styles.itemInfoIcon}></View>
<Image source={require("../../assets/Mine/iconpic1.png")} style={[styles.itemInfoIcon,{width:26, height:26}]} />
{/* <View style={styles.itemInfoIcon}></View> */}
<Text style={styles.itemInfoName}>{this.props.name}</Text>
</View>
<Text style={styles.itemInfoRight}>{this.props.num} 评论</Text>
... ... @@ -109,11 +111,7 @@ const styles = StyleSheet.create({
alignItems: "center",
},
itemInfoIcon: {
width: 26,
height: 26,
backgroundColor: "#ccc",
marginRight: 10,
borderRadius: 26,
},
itemInfoName: {
fontSize: 13,
... ...
... ... @@ -4,7 +4,9 @@ import {
AppRegistry,
StyleSheet,
Text,
View
View,
TouchableOpacity,
Image,
} from 'react-native';
... ... @@ -13,25 +15,134 @@ export default class Mine extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
我的
</Text>
<TouchableOpacity style={styles.header}>
<View style={styles.headerLeft}>
<Image source={require("../../assets/Mine/iconpic1.png")} style={styles.mineIcon} />
<Text style={styles.mineName}>汉克斯</Text>
</View>
<Image source={require("../../assets/Mine/rightArrow_white.png")} style={styles.headerRight}/>
</TouchableOpacity>
<BarList style={styles.midContainer} />
<TouchableOpacity style={styles.loginOut}>
<Text style={styles.loginOutText}>退出登录</Text>
</TouchableOpacity>
</View>
);
}
}
class BarList extends Component {
render() {
return (
<View>
<ListItem title={"消息通知"} num={"11"} />
<ListItem title={"我的提问"} />
</View>
)
}
}
class ListItem extends Component {
render() {
return (
<TouchableOpacity style={styles.itemContainer}>
<View style={styles.itemLeft}>
<Image style={styles.leftIcon} source={require("../../assets/tabbar/ic_circle_s.png")} />
{/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */}
<Text style={styles.leftTitle}>{this.props.title}</Text>
{this.props.num?<Text style={styles.leftNum}> ({this.props.num})</Text>:null}
</View>
<Image style={styles.itemRight} source={require("../../assets/Mine/rightArrow_gray.png")} />
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF",
paddingTop: 64,
},
header: {
backgroundColor: "#1B9341",
height: 78,
flexDirection: "row",
justifyContent: "space-between",
paddingLeft: 13,
paddingRight: 13,
alignItems: "center",
marginBottom: 10,
},
headerLeft: {
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
},
mineIcon: {
width: 46,
height: 46,
marginRight: 14
},
mineName: {
fontSize: 16,
lineHeight: 22,
color: "#fff"
},
headerRight: {
width: 14,
height: 14,
},
midContainer: {
// marginTop: 10,
// marginBottom: 10,
// height: 92,
},
itemContainer: {
height: 46,
paddingLeft: 16,
paddingRight: 16,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#fff",
borderStyle: "solid",
borderColor: "#F0F0F0",
borderBottomWidth: 1,
},
itemLeft: {
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
},
leftIcon: {
marginRight: 11,
width: 16,
height: 16,
},
leftTitle: {
fontSize: 15,
color: "#242424"
},
leftNum: {
fontSize: 15,
color: "#EE6723"
},
itemRight: {
width: 14,
height: 14,
},
loginOut: {
marginTop: 10,
height: 46,
backgroundColor: "#fff",
justifyContent: "center",
},
loginOutText: {
textAlign: "center",
fontSize: 15,
},
});
... ...
... ... @@ -30,6 +30,7 @@ export default class Main extends Component {
<TabBarIOS tintColor="#08CC6A" barTintColor="white">
<TabBarIOS.Item
title="首页"
icon={require("../assets/tabbar/ic_home_n.png")}
selected={this.state.selectedItem == "home"}
onPress={() => {
this.setState({
... ... @@ -43,10 +44,12 @@ export default class Main extends Component {
component: Home,
title: "保护神"
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="保圈"
icon={require("../assets/tabbar/ic_circle_n.png")}
selected={this.state.selectedItem == "insuranceCircle"}
onPress={() => {
this.setState({
... ... @@ -64,6 +67,7 @@ export default class Main extends Component {
</TabBarIOS.Item>
<TabBarIOS.Item
title="保堂"
icon={require("../assets/tabbar/ic_umbrella_n.png")}
selected={this.state.selectedItem == "insuranceChurch"}
onPress={() => {
this.setState({
... ... @@ -81,6 +85,7 @@ export default class Main extends Component {
</TabBarIOS.Item>
<TabBarIOS.Item
title="我的"
icon={require("../assets/tabbar/ic_mine_n.png")}
selected={this.state.selectedItem == "mine"}
onPress={() => {
this.setState({
... ...