通过使用TabBarIOS组件拓展其功能构建了一个ReactNative项目。包含内容：熟练ReactNative的flex box布局，熟悉基本组件、自定义组件以及常用API 。
先看效果图：
screen2
screen1
在index.ios.js中的主要代码：
render: function(){
return(
<TabBarIOS style={styles.flex}>
<TabBarIOS.Item
title="首页"
onPress={this.select.bind(this, 'home')}
selected={this.state.tab === 'home'}>
<NavigatorIOS
style={{flex:1}}
initialRoute={{
component: Home,
title: '首页',
passProps: {},
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
title="发现"
onPress={this.select.bind(this, 'find')}
selected={this.state.tab === 'find'}>
<ScrollView style={styles.flex}>
</ScrollView>
</TabBarIOS.Item>
<TabBarIOS.Item
title="我"
onPress={this.select.bind(this, 'profile')}
selected={this.state.tab === 'profile'}>
<ScrollView style={styles.flex}>
</ScrollView>
</TabBarIOS.Item>
</TabBarIOS>
);
}
});
这就是一个app的主要结构，在iOS中TabBarIOS充当着UITabBarController的角色。这里使用了自定义组件Home，需要导入var Home = require('./Home');
- 自定义的首页组件Home，在Home.js文件的主要代码：
var Home = React.createClass({
render: function(){
return (
<ScrollView style={styles.flex}>
<Text style={styles.list_item} onPress={this.goTo}>☆ 点我哟1</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 点我哟2</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 点我哟3</Text>
</ScrollView>
);
},
goTo: function(){
this.props.navigator.push({
component: Detail,
title: '详情',
rightButtonTitle: '右Button',
onRightButtonPress: function(){
alert('点击了右Button');
}
});
}
});
module.exports = Home;
在iOS中相当于ViewController，也相当于在Android中的Activity。在文件结尾特别注意这句代码module.exports = Home;这是导出该类，才能让别的类可引用。这里用引用了Detail组件，在文件开头需导入该类var Detail = require('./Detail');
- 自定义的组件Detail主要代码：
......
//首页详情
var Detail = React.createClass({
render:function(){
return (
<ScrollView>
<MargginBox>
<BorderBox>
<PaddingBox>
<ElementBox>
</ElementBox>
</PaddingBox>
</BorderBox>
</MargginBox>
</ScrollView>
)
}
});
var MargginBox = React.createClass({
render:function(){
return (
<View style={[BoxStyles.margginBox]}>
<Box childName="borderBox" height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
</View>
)
}
});
var BorderBox = React.createClass({
render:function(){
return (
<Box childName="paddingBox" height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}</Box>
)
}
});
var PaddingBox = React.createClass({
render:function(){
return (
<Box childName="elementBox" height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}</Box>
)
}
});
var Box = React.createClass({
render:function(){
return (
<View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
<View style={[BoxStyles[this.props.childName]]}>
<View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
{this.props.children}
<View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
<View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
</View>
)
}
});
var ElementBox = React.createClass({
render:function(){
return (
<View style={[BoxStyles.box,BoxStyles.height100]}>
<View style={[BoxStyles.measureBox]}>
<View style={[BoxStyles.right]}><Text>height</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width</Text></View>
<View style={[BoxStyles.label]}><Text>element</Text></View>
<View style={[BoxStyles.widthdashed]}></View>
<View style={[BoxStyles.heightdashed]}></View>
</View>
)
}
});
var BoxStyles = StyleSheet.create({
......
})
module.exports = Detail;
特别注意：
1.在github下载了demo后直接运行会报错
须cd到项目根目录，然后在终端运行npm install，这会需要耐心等待一点时间。有如下的效果则成功，在配置中。
screen3.png
2.运行到真机上的配置
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
只需将AppDelegate.m文件上面代码中的localhost替换为电脑ip地址即可，如：192.168.1.10。
获取电脑ip地址的简单办法，如下图。
screen4.png
源码请点击github地址下载。
QQ:2239344645 我的github
