罗广聪

导航OK,跳转页OK,就剩下登录注册模块

... ... @@ -5,7 +5,7 @@
*/
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";
import { AppRegistry, StyleSheet, Text, View, Image } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import Home from "./src/pages/Home/index";
... ... @@ -13,45 +13,67 @@ import InsuranceCircle from "./src/pages/InsuranceCircle/index";
import InsuranceChurch from "./src/pages/InsuranceChurch/index";
import Mine from "./src/pages/Mine/index";
import Login from "./src/pages/Login";
import AllProduct from "./src/pages/Home/allProduct";
import CommonWebView from "./src/Components/CommonWebView";
import Details from "./src/pages/InsuranceCircle/details";
const MainTabBar = TabNavigator({
Home: { screen: Home, navigationOptions: { title: "首页"} },
InsuranceCircle: { screen: InsuranceCircle },
InsuranceChurch: { screen: InsuranceChurch },
Mine: { screen: Mine }
});
class Main extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
isLogin: true
};
Home: {
screen: Home,
navigationOptions: {
// title: "首页",
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={require("./src/assets/tabbar/ic_home_s.png")} />
) : (
<Image source={require("./src/assets/tabbar/ic_home_n.png")} />
)
}
render() {
const { isLogin } = this.state;
return isLogin ? (
<MainTabBar />
},
InsuranceCircle: {
screen: InsuranceCircle,
navigationOptions: {
// title: "首页",
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={require("./src/assets/tabbar/ic_circle_s.png")} />
) : (
<Login
loginSuccess={this.props.loginSuccess}
onLogin={this.props.onLogin}
/>
);
<Image source={require("./src/assets/tabbar/ic_circle_n.png")} />
)
}
},
InsuranceChurch: {
screen: InsuranceChurch,
navigationOptions: {
// title: "首页",
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={require("./src/assets/tabbar/ic_umbrella_s.png")} />
) : (
<Image source={require("./src/assets/tabbar/ic_umbrella_n.png")} />
)
}
},
Mine: {
screen: Mine,
navigationOptions: {
// title: "首页",
tabBarIcon: ({ focused }) =>
focused ? (
<Image source={require("./src/assets/tabbar/ic_mine_s.png")} />
) : (
<Image source={require("./src/assets/tabbar/ic_mine_n.png")} />
)
}
}
},{
swipeEnabled: true,
tabBarOptions: {
activeTintColor: "#1B9341"
}
}
const ProtectGod = StackNavigator({
Main: { screen: Main },
Home: { screen: Home, navigationOptions: { headerTitle: "首页"} },
InsuranceCircle: { screen: InsuranceCircle },
InsuranceChurch: { screen: InsuranceChurch },
Mine: { screen: Mine },
Login: { screen: Login }
});
// export default class ProtectGod extends Component {
// class Main extends Component {
// constructor(props) {
// super(props);
// this.state = {
... ... @@ -59,62 +81,56 @@ const ProtectGod = StackNavigator({
// isLogin: true
// };
// }
// componentWillMount() {
// // console.log("componentWillMount生命周期");
// // var that = this;
// // return fetch(`https://devpay.brae.co/test/insurance/login`,{
// // method: "POST",
// // headers: {
// // 'Accept': 'application/json',
// // 'Content-Type': 'application/json',
// // },
// // })
// // .then((resp) => {
// // console.log("测试接口",resp);
// // // return false;
// // if (resp.status === 200) {
// // return resp.json();
// // } else {
// // console.error("something went wrong!");
// // }
// // })
// // .then((respJson) => {
// // if (respJson.enmsg != 'ok') {
// // console.error(err);
// // alert(respJson.cnmsg);
// // } else {
// // that.setState({
// // testData: respJson.data
// // });
// // console.log('state.testData',that.state.testData);
// // }
// // })
// // .catch((err) => console.error(err))
// }
// render() {
// console.log("看看这个登录state", this.state.isLogin);
// return this.state.isLoading ? null : (
// <Main
// loginSuccess={this.state.isLogin}
// selectedItem={this.state.selectedItem}
// onLogin={isLogin => {
// this.setState({
// isLogin: isLogin
// });
// }}
// const { isLogin } = this.state;
// return isLogin ? (
// <MainTabBar />
// ) : (
// <Login
// loginSuccess={this.props.loginSuccess}
// onLogin={this.props.onLogin}
// />
// );
// }
// }
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
const ProtectGod = StackNavigator(
{
// Main: { screen: Main },
MainTabBar: { screen: MainTabBar },
Home: { screen: Home },
InsuranceCircle: { screen: InsuranceCircle },
InsuranceChurch: { screen: InsuranceChurch },
Mine: { screen: Mine },
Login: { screen: Login },
AllProduct: {
screen: AllProduct,
navigationOptions: { headerTitle: "全部产品" }
},
CommonWebView: { screen: CommonWebView },
Details: { screen: Details }
},
{
navigationOptions: {
// 顶部标题颜色
// headerTintColor: 'red',
// 顶部背景颜色
// headerStyle: {backgroundColor: "white"},
// headerTitleStyle: {alignSelf: 'center'},
}
}
);
const styles = StyleSheet.create(
{
// container: {
// flex: 1,
// justifyContent: "center",
// alignItems: "center",
// backgroundColor: "#F5FCFF"
// }
}
});
);
AppRegistry.registerComponent("ProtectGod", () => ProtectGod);
... ...
... ... @@ -4,17 +4,19 @@ import {
WebView,
View,
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
export default class CommonWebview extends Component {
constructor(props) {
super(props);
}
render() {
console.log("url",this.props.url)
console.log("url",this.props)
return (
<WebView
style={styles.container}
source={{uri: this.props.url}}
source={{uri: this.props.navigation.state.params.item.url}}
/>
);
}
... ...
... ... @@ -8,9 +8,11 @@ import {
TouchableOpacity,
Image
} from "react-native";
import { StackNavigator, TabNavigator } from 'react-navigation';
import CommonWebView from "../../Components/CommonWebView";
export default class AllProduct extends Component {
constructor(props) {
super(props);
this.state = {
... ... @@ -44,6 +46,7 @@ export default class AllProduct extends Component {
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
{/* <NewsList /> */}
... ... @@ -56,14 +59,7 @@ export default class AllProduct extends Component {
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}}
onPress={() => navigate("CommonWebView", { item: item })}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
... ... @@ -88,7 +84,6 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF",
paddingTop: 74
},
scrollViewContainer: {
height: 300
... ...
... ... @@ -8,14 +8,14 @@ import {
TouchableOpacity,
ScrollView
} from "react-native";
import { StackNavigator, TabNavigator } from 'react-navigation';
import { StackNavigator, TabNavigator } from "react-navigation";
import Swiper from "react-native-swiper";
import AllProduct from "./allProduct";
// import AllProduct from "./allProduct";
import CommonWebView from "../../Components/CommonWebView";
export default class Home extends Component {
static navigationOptions = {
title: '首页',
title: "首页"
};
constructor(props) {
super(props);
... ... @@ -79,14 +79,13 @@ export default class Home extends Component {
console.log("thisprops", this.props);
}
_renderMap() {
const { navigate } = this.props.navigation;
return this.state.ListData.map((item, index) => {
return (
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this._jumpToWebView(item);
}}
onPress={() => navigate("CommonWebView", { item: item })}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
... ... @@ -97,22 +96,8 @@ export default class Home extends Component {
);
});
}
_jumpToWebView(item) {
// console.log("跳转到webview的item",item);
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}
gotoAllProduct() {
this.props.navigator.push({
component: AllProduct,
title: "全部产品"
});
}
_swiper() {
const { navigate } = this.props.navigation;
return (
<View style={{ height: 120 }}>
<Swiper
... ... @@ -122,7 +107,7 @@ export default class Home extends Component {
height={120}
dotStyle={{
width: 6,
height: 6,
height: 6
}}
activeDotStyle={{
width: 6,
... ... @@ -130,15 +115,14 @@ export default class Home extends Component {
}}
>
{this.state.swiperImgList.map((item, index) => {
{/* console.log("图片item",item); */}
{
/* console.log("图片item",item); */
}
return (
<TouchableOpacity
style={styles.slide}
key={index}
onPress={() => {
console.log("我是轮播图")
this._jumpToWebView(item);
}}
onPress={() => navigate("CommonWebView", { item: item })}
>
<Image
style={styles.slideImg}
... ... @@ -153,16 +137,16 @@ export default class Home extends Component {
);
}
render() {
console.log("首页的this.props", this);
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
{/* <Carousel /> */}
{this._swiper()}
<TouchableOpacity
style={styles.midContainer}
onPress={() => {
this.gotoAllProduct();
}}
onPress={() =>
navigate("AllProduct")
}
>
<Image
source={require("../../assets/home/pic.png")}
... ... @@ -237,10 +221,7 @@ const styles = StyleSheet.create({
// color: "#202020",
},
listContainer: {
// height: 150
flex: 1,
// paddingBottom: 64,
// marginBottom: 49
flex: 1
},
itemContainer: {
height: 90,
... ... @@ -278,7 +259,7 @@ const styles = StyleSheet.create({
color: "#7A7A7A",
fontSize: 13,
marginTop: 10,
textAlign: "center",
textAlign: "center"
// marginBottom: 10
}
});
... ...
... ... @@ -49,6 +49,7 @@ export default class InsuranceChurch extends Component {
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView
... ... @@ -60,14 +61,7 @@ export default class InsuranceChurch extends Component {
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this.props.navigator.push({
component: CommonWebView,
passProps: {
url: item.url
}
});
}}
onPress={() => navigate("CommonWebView", { item: item })}
>
<Image style={styles.itemImgWrapper} source={item.imgurl} />
<View style={styles.itemRightWrapper}>
... ...
... ... @@ -16,7 +16,7 @@ export default class Details extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
data: this.props.navigation.state.params.item,
text: ""
};
}
... ... @@ -138,7 +138,6 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "white",
paddingTop: 64
},
KAVContainer: {
flex: 1,
... ...
... ... @@ -109,6 +109,7 @@ export default class InsuranceCircle extends Component {
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView
... ... @@ -120,14 +121,7 @@ export default class InsuranceCircle extends Component {
<TouchableOpacity
style={styles.itemContainer}
key={index}
onPress={() => {
this.props.navigator.push({
component: Details,
passProps: {
data: {...item},
},
});
}}
onPress={() => navigate("Details", { item: item })}
>
<Text style={styles.itemTitle} numberOfLines={2}>
{item.title}
... ...