1.index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
'use strict';
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Navigator,
ScrollView,
Text,
View
} from 'react-native';
//const Header=require('./header');
import Header from './header';
const USER_MODELS = {
1: {
name: 'mot',
age: 23
},
2: {
name: '晴明大大',
age: 25
}
};
export default class MyProject extends Component {
render() {
let defaultName = 'Index';
let defaultComponent = Index;
return ( < Navigator initialRoute = {
{
name: defaultName,
component: defaultComponent
}
}
//配置场景
configureScene = {
(route) => {
//这个是页面之间跳转时候的动画,具体有哪些?可以看这个目录下,有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
return Navigator.SceneConfigs.VerticalUpSwipeJump;
}
}
renderScene = {
(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}
}
/>
);
}
}
class Index extends Component {
render() {
return (
<View style={styles.flex}>
<Header></Header>
<List title='一线城市楼市退烧 有房源一夜跌价160万'></List>
<List title='上海市民称墓地太贵买不起 买房存骨灰'></List>
<List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List>
<List title='生活大爆炸人物原型都好牛逼'></List>
<ImportantNews
news={[
'解放军报报社大楼正在拆除 标识已被卸下(图)',
'韩国停签东三省52家旅行社 或为阻止朝旅游创汇',
'南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻',
'防总部署长江防汛:以防御98年量级大洪水为目标'
]} navigator={this.props.navigator}>
</ImportantNews>
</View>
);
}
}
class List extends Component {
render() {
return (
<View style={styles.list_item}>
<Text style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
}
class ImportantNews extends Component {
constructor(props) {
super(props);
this.state = {
id: 1,
user: null,
};
}
show(title, i) {
//alert(title);
const {
navigator
} = this.props;
//alert(navigator);
//为什么这里可以取得 props.navigator?请看上文:
//<Component {...route.params} navigator={navigator} />
//这里传递了navigator作为props
const self = this;
if (navigator) {
navigator.push({
name: 'Detail',
component: Detail,
params: {
id: i,
//从详情页获取user
getUser: function(user) {
self.setState({
user: user
})
}
}
})
}
}
render() {
var news = [];
for (var i in this.props.news) {
var text = (
<Text
onPress={this.show.bind(this,this.props.news[i],i)}
numberOfLines={2}
style={styles.news_item}
key={i}
>{this.props.news[i]}</Text>
);
news.push(text);
}
//if (this.state.user) {
//回传数据
alert(JSON.stringify(this.state.user));
//}
return (
<View style={styles.flex}>
<Text style={styles.news_title}>今日要闻</Text>
{news}
</View>
);
}
}
class Detail extends Component {
constructor(props) {
super(props);
this.state = {
id: null
};
}
componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数: id
this.setState({
id: this.props.id
});
}
_pressButton() {
const {
navigator
} = this.props;
if (this.props.getUser) {
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
}
if (navigator) {
//很熟悉吧,入栈出栈~ 把当前的页面pop掉,这里就返回到了上一个页面:List了
navigator.pop();
}
}
render() {
return (
<ScrollView>
<Text style={styles.list_item} >传递过来的用户id是:{this.state.id}</Text>
<Text style={styles.list_item} onPress={this._pressButton.bind(this)} >点击我可以跳回去</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
list_item: {
height: 40,
marginLeft: 10,
marginRight: 10,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
justifyContent: 'center',
},
list_item_font: {
fontSize: 16,
},
news_item: {
marginLeft: 10,
marginRight: 10,
fontSize: 15,
lineHeight: 40,
},
news_title: {
fontSize: 20,
fontWeight: 'bold',
color: '#CD1D1C',
marginLeft: 10,
marginTop: 15,
},
});
AppRegistry.registerComponent('MyProject', () => MyProject);
2.header.js
/**
* Created by StevenJiang on 2016/4/4.
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} 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: {
marginTop: 25,
height: 50,
borderBottomWidth: 3 / PixelRatio.get(),
borderBottomColor: '#EF2D36',
alignItems: 'center',
},
font: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center',
},
font_1: {
color: '#CD1D1C',
},
font_2: {
color: '#FFF',
backgroundColor: '#CD1D1C',
},
});
module.exports = Header;