RN

RN

//网易新闻   总标题

import React, { Component } from "react";
import { View, Text } from "react-native";
import Title from "./Title";
import LunBo from "./LunBo";
import Tu from "./Tu";
import More from "./More";

export default class Wang extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View>
        <Title />
        <LunBo />
        <Tu />
        <More />
      </View>
    );
  }
}
 

//标题    

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export default class Title extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={lumn}>
        <View style={w}>
          <Image
            style={styles.icon}
            source={require("./img/icon-personal-v2.png")}
          />
          <Image
            style={styles.logo}
            source={require("./img/logo_2017_v1.png")}
          />
          <Image style={styles.xia} source={require("./img/xia.png")} />
          <Image
            style={ail}
            source={require("./img/icon-email-v2.png")}
          />
        </View>
        <View style={[w, styles.title]}>
          <Text style={}>体育</Text>
          <Text style={styles.tu}>图片</Text>
          <Text style={}>财经</Text>
          <Text style={}>汽车</Text>
          <Text style={}>军事</Text>
          <Text style={}>直播</Text>
          <Image style={styles.img} source={require("./img/icon8.png")} />
        </View>
      </View>
    );
  }
}
const styles = ate({
  row: {
    flexDirection: "row"
  },
  column: {
    flexDirection: "column"
  },
  icon: {
    width: 35,
    height: 40,
    marginHorizontal: 10,
    marginVertical: 10
  },
  logo: {
    width: 200,
    height: 40,
    marginHorizontal: 10,
    marginVertical: 10
  },
  xia: {
    width: 30,
    height: 35,
    marginHorizontal: 8,
    marginVertical: 10
  },
  email: {
    width: 35,
    height: 30,

    marginVertical: 10
  },
  title: {
    backgroundColor: "red",
    justifyContent: "space-around",
    padding: 10
  },
  text: {
    color: "#D6D8DA"
  },
  tu: {
    color: "#F4F7F9",
    fontWeight: "bold"
  },
  img: {
    marginTop: 5
  }
});
 

//轮播图

import React, { Component } from "react";
import { View, Text, Image, ScrollView, Dimensions } from "react-native";

export default class LunBo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { width } = ("window");
    return (
      <ScrollView horizontal={true} pagingEnabled={true}>
        <View style={{ width: width, height: 200 }}>
          <Image source={require("./img/img1.ph.126.jpg")} />
        </View>
        <View style={{ width: width, height: 200 }}>
          <Image source={require("./img/img2.ph.126.jpg")} />
        </View>
        <View style={{ width: width, height: 200 }}>
          <Image source={require("./img/img3.ph.126.jpg")} />
        </View>
      </ScrollView>
    );
  }
}
 

//新闻列表

import React, { Component } from "react";
import { View, Text, Image, StyleSheet } from "react-native";

export default class Tu extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={lumn}>
        <View style={[w, styles.biao]}>
          <Image source={require("./img/meitu.png")} />
          <Image source={require("./img/xinwei.png")} />
          <Image source={require("./img/mingxing.png")} />
          <Image source={require("./img/ti.png")} />
          <Image source={require("./img/redian.png")} />
        </View>
        <View style={[w, styles.biao]}>
          <Text>美图</Text>
          <Text>新闻</Text>
          <Text>明星</Text>
          <Text>体坛</Text>
          <Text style={}>热点</Text>
        </View>
      </View>
    );
  }
}
const styles = ate({
  row: {
    flexDirection: "row"
  },
  column: {
    flexDirection: "column"
  },
  biao: {
    marginTop: 8,
    marginHorizontal: 20,
    justifyContent: "space-around"
  },
  re: {
    color: "red",
    justifyContent: "space-around"
  }
});
 

//新闻详情

import React, { Component } from "react";
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";

export default class More extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={w}>
        <View style={[lumn, styles.kuan]}>
          <Image style={styles.img} source={require("./img/img4.ph.126.jpg")} />
          <Text>货船遇台风在惠州海域沉没 12名船员落水</Text>
          <View style={w}>
            <View style={w}>
              <Image source={require("./img/icon6.png")} />
              <Text> 4</Text>
            </View>
            <View style={[w, styles.bian]}>
              <Image source={require("./img/icon7.png")} />
              <Text> 8402</Text>
            </View>
          </View>
        </View>
        <View style={[lumn, styles.kuan]}>
          <Image style={styles.img} source={require("./img/img5.ph.126.jpg")} />
          <Text>货船遇台风在惠州海域沉没 12名船员落水</Text>
          <View style={w}>
            <View style={w}>
              <Image source={require("./img/icon6.png")} />
              <Text> 5</Text>
            </View>
            <View style={[w, styles.bian]}>
              <Image source={require("./img/icon7.png")} />
              <Text> 6</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
const { width } = ("window");
const styles = ate({
  row: {
    flexDirection: "row"
  },
  column: {
    flexDirection: "column"
  },
  img: {
    width: (width / 2) * 1,
    height: 180
  },
  kuan: {
    width: (width / 2) * 1,
    height: 200
  },
  bian: {
    position: "absolute",
    top: 0,
    right: 2
  }
});