react-native模仿京东首页
主要参考这位大侠的教程，跟着手写了一把：http://blog.csdn.net/yuanguozhengjust?viewmode=contents
（1）安装环境
（2）命令行cd到项目文件夹下安装插件：
tabBar的插件：npm install i react-native-tab-navigator --save
轮转图片的插件：npm i -d react-native-viewpager --save
（3）开始编码：
index.ios.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
Image,
View
} from 'react-native';
import Header from './Header';
import MainScreen from './MainScreen';
import TabNavigator from 'react-native-tab-navigator';
const HOME = 'home';
const HOME_NORMAL = require('./images/tabs/home_normal.png');
const HOME_FOCUS = require('./images/tabs/home_focus.png');
const CATEGORY = 'category';
const CATEGORY_NORMAL = require('./images/tabs/category_normal.png');
const CATEGORY_FOCUS = require('./images/tabs/category_focus.png');
const FAXIAN = 'faxian';
const FAXIAN_NORMAL = require('./images/tabs/faxian_normal.png');
const FAXIAN_FOCUS = require('./images/tabs/faxian_focus.png');
const CART = 'cart';
const CART_NORMAL = require('./images/tabs/cart_normal.png');
const CART_FOCUS = require('./images/tabs/cart_focus.png');
const PERSONAL = 'personal';
const PERSONAL_NORMAL = require('./images/tabs/personal_normal.png');
const PERSONAL_FOCUS = require('./images/tabs/personal_focus.png');
class react_native_jd extends Component {
constructor(props) {
super(props);
this.state = {selectedTab: HOME}
}
_renderTabItem(img, selectedImg, tag, childView) {
return (
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: tag })}>
{childView}
);
}
static _createChildView(tag) {
return (
{tag}
)
}
render() {
return (
{this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME,
);
}
}
const styles = StyleSheet.create({
tab: {
height: 52,
backgroundColor: '#333333',
alignItems: 'center'
},
tabIcon: {
width: 30,
height: 35,
resizeMode: 'stretch',
marginTop: 12.5
},
});
AppRegistry.registerComponent('react_native_jd', () => react_native_jd);MainScreen.js
'use strict';
import React, {
Component,
View,
Text,
Image,
StyleSheet,
ScrollView,
Alert,
RefreshControl
} from 'react-native';
import MenuButton from './MenuButton';
import ViewPager from 'react-native-viewpager';
const BANNER_IMGS = [
require('./images/banner/1.jpg'),
require('./images/banner/2.jpg'),
require('./images/banner/3.jpg'),
require('./images/banner/4.jpg')
];
export default class MainScreen extends Component {
constructor(props) {
super(props);
// 用于构建DataSource对象
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 实际的DataSources存放在state中
this.state = {
dataSource: dataSource.cloneWithPages(BANNER_IMGS)
}
}
_renderPage(data, pageID) {
return (
);
}
_onMenuClick(title, tag) {
Alert.alert('提示', '你点击了:' + title + " Tag:" + tag);
}
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
height: 104,
flexDirection: 'row', // 水平排布
paddingLeft: 10,
paddingRight: 10,
backgroundColor: '#d74140',
alignItems: 'center' // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
},
page: {
flex: 1,
height: 130,
resizeMode: 'stretch'
},
menuView: {
flexDirection: 'row',
marginTop: 10
}
}); MenuButton.js
'use strict';
import React, {
Component,
View,
Text,
Image,
TouchableWithoutFeedback,
PropTypes,
StyleSheet
} from 'react-native';
export default class MenuButton extends Component {
static propTypes = {
renderIcon: PropTypes.number.isRequired, // 图片,加入.isRequired即为比填项
showText: PropTypes.string, // 显示标题\文字
tag: PropTypes.string, // Tag
onClick: PropTypes.func // 回调函数
};
constructor(props) {
super(props);
this._onClick = this._onClick.bind(this); // 需要在回调函数中使用this,必须使用bind(this)来绑定
}
_onClick() {
if (this.props.onClick) { // 在设置了回调函数的情况下
this.props.onClick(this.props.showText, this.props.tag); // 回调Title和Tag
}
}
render() {
return (
{this.props.showText}
);
}
}
const styles = StyleSheet.create({
iconImg: {
width: 38,
height: 38,
marginBottom: 2
},
showText: {
fontSize: 12
}
});Header.js
'use strict';
import React, {
Component,
Image,
TextInput,
View,
Platform,
StyleSheet
} from 'react-native';
export default class Header extends Component {
render() {
return (
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row', // 水平排布
paddingLeft: 10,
paddingRight: 10,
paddingTop: Platform.OS === 'ios' ? 20 : 0, // 处理iOS状态栏
height: Platform.OS === 'ios' ? 68 : 48, // 处理iOS状态栏
backgroundColor: '#d74047',
alignItems: 'center' // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
},
logo: {
height: 24,
width: 64,
resizeMode: 'stretch' // 设置拉伸模式
},
searchBox: {
height: 30,
flexDirection: 'row',
flex: 1, // 类似于android中的layout_weight,设置为1即自动拉伸填充
borderRadius: 5, // 设置圆角边
backgroundColor: 'white',
alignItems: 'center',
marginLeft: 8,
marginRight: 12
},
scanIcon: {
height: 26.7,
width: 26.7,
resizeMode: 'stretch'
},
searchIcon: {
marginLeft: 6,
marginRight: 6,
width: 16.7,
height: 16.7,
resizeMode: 'stretch'
},
voiceIcon: {
marginLeft: 5,
marginRight: 8,
width: 15,
height: 20,
resizeMode: 'stretch'
},
inputText: {
flex: 1,
backgroundColor: 'transparent',
fontSize: 14
}
});文件结构如下：
index.ios.js是程序入口，MainSceen.js定义首页视图，
Header.js定义头部，MenuButton.js定义首页按钮，Image文件夹用来存放图片。
最终实现效果如下：
详细请参考此博客：http://blog.csdn.net/yuanguozhengjust/article/details/50556700
有问题欢迎交流。
案例下载地址：
http://download.csdn.net/detail/daleiwang/9434440
这里有位兄台总结了一些react native的学习资源比较全面：
http://blog.csdn.net/bondsui/article/details/49160649