index.android.js
~~~
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio
} from 'react-native';
var HeaderView=require('./HeaderView.js');
export default class scrollView extends Component {
render() {
return (
<View style={styles.container}>
<HeaderView />
<List title='记者实地探访总书记讲的“半条被子”的故事'></List>
<List title='总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”'></List>
<List title='国考中央职位竞争远高于基层 最热岗近6500:1'></List>
<List title='确定！里皮出任国足主帅 日薪将超40万'></List>
<HotList></HotList>
</View>
);
}
}
class List extends Component{
render(){
return(
<View style={[styles.listView,styles.bottomLine]}>
<Text numberOfLines={1} style={styles.listFont}>{this.props.title}</Text>
</View>
);
}
}
let HotListData=[
'记者实地探访总书记讲的“半条被子”的故事',
'总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”总理关切！ 国务院发文喊你“收红包”',
'国考中央职位竞争远高于基层 最热岗近6500:1',
'确定！里皮出任国足主帅 日薪将超40万'
];
class HotList extends Component{
render(){
return (
<View>
<View style={styles.titleView}>
<Text style={styles.titleStyle}>今日要闻</Text>
</View>
{this.renderList()}
</View>
);
}
renderList(){
var arr=[];
for (var i = 0; i < HotListData.length; i++) {
arr.push(
<View key={i} style={[styles.listView,styles.bottomLine]}>
<Text numberOfLines={2} style={styles.listFont} onPress={this.show.bind(this,HotListData[i])}>{HotListData[i]}</Text>
</View>
)
};
return arr;
}
show(content){
alert(content);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
},
listView:{
paddingLeft:10,
paddingRight:10,
height:40,
justifyContent:'center'
},
listFont:{
fontSize:14,
color:'rgb(139,139,139)',
},
bottomLine:{
borderBottomWidth:1/PixelRatio.get(),
borderBottomColor:'rgb(220,220,220)'
},
titleView:{
height:50,
justifyContent:'center',
paddingLeft:10
},
titleStyle:{
color:'rgb(205,29,28)',
fontSize:16,
}
});
AppRegistry.registerComponent('scrollView', () => scrollView);
~~~
HeaderView.js
~~~
/**
*
*简单网易新闻头部
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
} from 'react-native';
class HeaderView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.font1}>网易</Text>
<Text style={styles.font2}>新闻</Text>
<Text style={styles.font3}>有态度''</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height:50,
backgroundColor:'#f7f7f7',
borderBottomColor:'rgb(205,29,28)',
borderBottomWidth:2,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
},
font1:{
color:'rgb(205,29,28)',
fontSize:18
},
font2:{
backgroundColor:'rgb(205,29,28)',
color:'#fff',
fontSize:18,
paddingLeft:5,
paddingRight:5
},
font3:{
color:'rgb(109,109,109)',
fontSize:18
},
});
module.exports=HeaderView;
~~~
