通過使用TabBarIOS組件拓展其功能構(gòu)建了一個(gè)ReactNative項(xiàng)目低飒。包含內(nèi)容：熟練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="發(fā)現(xiàn)"
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>
);
}
});
這就是一個(gè)app的主要結(jié)構(gòu)，在iOS中TabBarIOS充當(dāng)著UITabBarController的角色允粤。這里使用了自定義組件Home崭倘，需要導(dǎo)入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}>☆ 點(diǎn)我喲1</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 點(diǎn)我喲2</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 點(diǎn)我喲3</Text>
</ScrollView>
);
},
goTo: function(){
this.props.navigator.push({
component: Detail,
title: '詳情',
rightButtonTitle: '右Button',
onRightButtonPress: function(){
alert('點(diǎn)擊了右Button');
}
});
}
});
module.exports = Home;
在iOS中相當(dāng)于ViewController类垫，也相當(dāng)于在Android中的Activity司光。在文件結(jié)尾特別注意這句代碼module.exports = Home;這是導(dǎo)出該類，才能讓別的類可引用悉患。這里用引用了Detail組件残家，在文件開頭需導(dǎo)入該類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后直接運(yùn)行會(huì)報(bào)錯(cuò)
須cd到項(xiàng)目根目錄，然后在終端運(yùn)行npm install售躁，這會(huì)需要耐心等待一點(diǎn)時(shí)間坞淮。有如下的效果則成功，在配置中陪捷。
screen3.png
2.運(yùn)行到真機(jī)上的配置
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
只需將AppDelegate.m文件上面代碼中的localhost替換為電腦ip地址即可回窘，如：192.168.1.10。
獲取電腦ip地址的簡單辦法市袖，如下圖啡直。
screen4.png
源碼請(qǐng)點(diǎn)擊github地址下載烁涌。
QQ:2239344645 我的github
