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;
~~~
