罗广聪

首页静态OK

/**
* 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, Image, TouchableOpacity } from "react-native";
import Carousel from "../../Components/Carousel";
import NewsList from "./NewList";
export default class Main extends Component {
... ... @@ -12,22 +13,19 @@ export default class Main extends Component {
return (
<View style={styles.container}>
<Carousel />
{/* <Text style={styles.welcome}>首页</Text> */}
<TouchableOpacity onPress={() => {this.props.navigator.push()}} style={styles.midContainer}>
<TouchableOpacity style={styles.midContainer}>
<Image source={require('../../assets/首页的副本/pic.png')} style={{width:72, height:18}} />
<Text style={styles.midText}>平安保险2017</Text>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text>保险头条</Text>
<Text style={styles.minText}>保险头条</Text>
</View>
<NewsList />
</View>
);
}
}
// this.props.navigator.push()
const styles = StyleSheet.create({
container: {
flex: 1,
... ... @@ -35,7 +33,6 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
alignItems: "stretch",
backgroundColor: "#EFEFEF"
},
midContainer: {
height: 45,
... ... @@ -58,7 +55,7 @@ const styles = StyleSheet.create({
height: 45,
justifyContent: "center",
paddingLeft: 13,
fontSize: 15,
color: "#202020",
// fontSize: 15,
// color: "#202020",
}
});
... ...