ReactNative 仿網易新聞UI Demo

Header.js

import React, {
    Component
  } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    PixelRatio,
  } from 'react-native';
class Header extends Component{
     render(){
        return(
            <View style={styles.flex}>
                <Text style={[styles.font]}>
                  <Text style={styles.font_1}>網易</Text>
                  <Text style={styles.font_2}>新聞</Text>
                  <Text>有態度</Text>
                </Text>
            </View>
          );
     }
  }




  const styles = StyleSheet.create({
    flex: {
      borderBottomWidth:3/PixelRatio.get(),
      alignItems: 'center',
      height : 50,
      marginTop: 100,
      borderBottomColor: '#EF2D36',
    },

   font:{
      fontSize:25,
      textAlign: 'center',
      fontWeight: 'bold',
    },

    font_1: {
       color: '#CD1D1C'
    },
    font_2: {
      backgroundColor:'#CD1D1C',
      color: '#FFF'
    },

  });

module.exports=Header;

index.android.js

  /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   */

  import React, {
    Component
  } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    DrawerLayoutAndroid,
    ListView,
    PixelRatio,
  } from 'react-native';

  const Header = require("./Header")

  class AwesomeProject extends Component {


    render() {



      return (
          <View style={styles.flex}>
          <Header></Header>
          <List title="科技展上什麼“神器”吸引住習近平的目光"></List>
          <List title="四川廣元沉船事件前 白龍湖湖面情況"></List>

          <List title="揭祕黃光裕減刑案細節：減刑幅度比普通罪犯更小"></List>

          <List title="毛坦廠中學:萬人送考 放《好日子》等歌曲"></List>
          <ImportantViews 
            news={["滴滴回應電競選手被砍:系私下借用他人賬號接單",
                  "顧客訂餐吃到似蟑螂昆蟲 商家:每家店都會有",
                "公司董事長偷情藝術名媛 捉姦過程被直播(圖)",
                "男子手機褲袋內自燃被灼傷 當街脫褲子自救(圖)",
                "黨報\:有領導換屆前有點\"蔫\" 怕出錯丟了選票",
                "女子警告公交色狼遭對方威脅辱罵 無乘客制止"]}/>
         </View>

      );


    }
  }



 class List extends Component{
    render(){
      return(
          <View style={[styles.list_item]}>
            <Text numberOfLines={1} style={[styles.list_item_font]}>{this.props.title}</Text>
          </View>
        );
    }
 }

 class ImportantViews extends Component{
  show(title) {
    alert(title);
  }

    render(){

      var news = [];
      for(var i in this.props.news){

         var text = (
          <Text key={i}
                onPress={this.show.bind(this,this.props.news[i])}
                numberOfLines={2}
                style={styles.news_item}>
                {this.props.news[i]}
                </Text>


          );
         news.push(text);

      }

      return(
        <View style={styles.flex}>
          <Text style={styles.news_title_font}>今日要聞</Text>
          {news}
        </View>
      );
    }
 }

  const styles = StyleSheet.create({
    flex: {
      flex:1,
    },


    news_item:{
      marginLeft:10,
      marginRight:10,
      justifyContent:'center',
      height:40,
    },

    news_title_font:{
      fontSize:20,
      color:'red',
    },

    list_item_font:{
      fontSize:16,

    },
    list_item:{
      marginLeft:10,
      marginRight:10,
      justifyContent:'center',
      height:40,
      borderBottomWidth:1/PixelRatio.get(),
      borderBottomColor: '#ddd',
    },


  });

  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);